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

兼容IE浏览器的canvas画线和圆圈的更多相关文章

  1. canvas 画线

    一.canvas是基于状态的绘图环境 1.canvas是基于状态的绘制 context.moveTo(100,100); context.lineTo(700,700); context.lineWi ...

  2. HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 用canvas画“哆啦A梦”时钟

    前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的canvas~欧耶~ 之前看到有人建议我画蓝胖子,对哦,我怎么把童年最喜欢的蓝胖子忘了,为了表达我对蓝胖子的歉意,所以今天画了会动的he ...

  4. 用canvas画简单的“我的世界”人物头像

    前言:花了4天半终于看完了<Head First HTML5>,这本书的学习给我最大的感受就是,自己知识的浅薄,还有非常多非常棒的技术在等着我呢.[熊本表情]扶朕起来,朕还能学! H5新增 ...

  5. 纯JS画点、画线、画圆的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. H5中画图标签Canvas---画矩形，画线，画圆，渐变色，图形载入

    一: 1.鼠标监视坐标值 <!DOCTYPE html> <head> <meta charset=UTF-8> <title>canvas的演示< ...

  7. vue仿京东画线验证码，前端手指位置数据获取

    需求是这样的,京东H5移动端登录,有个安照箭头方向,画线登录的验证,看看是怎么实现的: 直接上代码了: <template> <div v-if="visible" ...

  8. Android中Path类的lineTo方法和quadTo方法画线的区别

    转载:http://blog.csdn.net/stevenhu_223/article/details/9229337 当我们需要在屏幕上形成画线时,Path类的应用是必不可少的,而Path类的li ...

  9. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

随机推荐

  1. hdu 4771 求一点遍历全部给定点的最短路（bfs+dfs）

    题目如题.题解如题. 因为目标点最多仅仅有4个,先bfs出俩俩最短路(包含起点).再dfs最短路.)0s1A;(当年弱跪杭州之题,现看如此简单) #include<iostream> #i ...

  2. MapReduce 的类型与格式【编写最简单的mapreduce】(1)

    hadoop mapreduce 中的map 和reduce 函数遵循下面的形式 map: (K1, V1) → list(K2, V2) reduce: (K2, list(V2)) → list( ...

  3. UVA10491 - Cows and Cars（概率）

    UVA10491 - Cows and Cars(概率) 题目链接 题目大意:给你n个门后面藏着牛.m个门后面藏着车,然后再给你k个提示.在你作出选择后告诉你有多少个门后面是有牛的,如今问你作出决定后 ...

  4. pre自动换行

    从word复制到html中的文本,用pre能够原汁原味的展示出来,但是会出现超过屏蔽界限的情况. 需要进行换行处理. 加上一句css pre { white-space: pre-wrap; word ...

  5. Session原理、安全以及最基本的Express和Redis实现

    Session原理.安全以及最基本的Express和Redis实现 https://segmentfault.com/a/1190000002630691

  6. Android TabLayout添加自定义分割线并且可以修改分割线高度

    为TabLayout添加分割线,显示的效果如下(红框内部分): 分割线 首先添加个竖线xml名为layout_divider_vertical: LinearLayout linearLayout = ...

  7. OpenGL编程（三）让矩形动起来

    上次实现了在窗口中添加一个了一个矩形.这次的任务是在上次代码的基础上,让那个矩形动起来. 1.思路 要看到动态的效果,首先添加一个定时器,规定的时间刷新一次窗口:不断修改矩形的位置,使其在时间轴上达到 ...

  8. ELK到底是什么？那么多公司用！__转载

    Sina.饿了么.携程.华为.美团.freewheel.畅捷通 .新浪微博.大讲台.魅族.IBM...... 这些公司都在使用ELK!ELK!ELK! ELK竟然重复了三遍,是个什么?   一.ELK ...

  9. HDU 1240 Asteroids!【BFS】

    题意:给出一个三维的空间,给出起点和终点,问是否能够到达终点 和上一题一样,只不过这一题的坐标是zxy输入的, 因为题目中说的是接下来的n行中分别是由n*n的矩形组成的,所以第一个n该是Z坐标,n*n ...

  10. ACM训练联盟周赛(第一场）

    B:Zeratul与Xor 题目描述 Xor(按位异或),对应C++中的“^”运算符. Zeratul给出了一个数列A[n](n≤105),要做q(q≤105)组动作,这些动作包括: 1  a:数列中 ...