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文件夹下

  • 相关阅读:
    Abp vNext 模块化系统简单介绍
    CLR via C# 笔记 -- 计算限制的异步操作(27)
    CLR via C# 笔记 -- 线程基础(26)
    Redis 入门
    .NET Core 中生成验证码
    CLR via C# 笔记 -- 异常和状态管理(20)
    CLR via C# 笔记 -- 托管堆和垃圾回收(21)
    CLR via C# 笔记 -- 字符、字符串、文本处理(14)
    广州公司黑名单
    总博客教程全导航
  • 原文地址:https://www.cnblogs.com/myphper/p/3972637.html
Copyright © 2011-2022 走看看