zoukankan      html  css  js  c++  java
  • 兼容IE浏览器的canvas画线和圆圈

    1.新建test.html文件,代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>人脉地图</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <!--[if lte IE 9]>
            <script src="js/excanvas.js"></script>
            <!--[if gt IE 9]><!-->
        <![endif]-->
        <script>
            (function($){
                $(window).on('load', function(){
                    getline();
                    drawarc();
                });
            })(jQuery);
            function getline(){
                var myCanvas = document.getElementById("box1");
                var context = myCanvas.getContext("2d");
                context.strokeStyle = "blue";
                context.lineWidth = 1;
                context.beginPath();
                context.strokeRect(0,0,300,200);
                context.strokeStyle = "red";
                context.moveTo(50,50);
                context.lineTo(100,100);
                context.stroke();
            }
            function drawarc(){
                var c = document.getElementById("box1");
                var ctx = c.getContext("2d");
                ctx.beginPath();
                ctx.lineWidth = 1;
                //画圈
                ctx.arc(100, 100, 20, 0, Math.PI * 2, true);
                ctx.stroke();
            }
        </script>

    </head>
    <body>
    <canvas id = "box1">Canvas画线技巧</canvas>
    </body>
    </html>

    2.下载jquery.js ,excanvas.js放入到js文件夹下

  • 相关阅读:
    npm查找全局安装包命令
    sublime3添加对react代码检查
    Android开发——搭建最新版本的Android开发环境
    git无法定位程序输入点libiconv
    Java学习----finally块
    Java学习----有风险的代码(异常)
    Java学习----集合函数
    Java学习----Math函数
    Java学习----日期函数
    Java学习----字符串函数
  • 原文地址:https://www.cnblogs.com/myphper/p/3972637.html
Copyright © 2011-2022 走看看