兼容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>
    
    <![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文件夹下

posted on 2014-09-15 13:24 幸福之家128817 阅读(466) 评论(0) 收藏举报