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. 微信公众号开发将war包导入新浪sae出现错误

    JAVA_Error: Error for /wechat.do java.lang.NoSuchFieldError: INSTANCE at org.apache.http.impl.io.Def ...

  2. Linux经常使用命令(九) - cat

    cat命令的用途是连接文件或标准输入并打印.这个命令经常使用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用. 1. 命令格式: cat [选项] 文 ...

  3. Atitit.运行cmd 命令行 php

    Atitit.运行cmd 命令行 php 1. 运行cmd 命令行,调用系统命令的基础 1 1.1. 实际运行模式 1 1.2. 空格的问题 1 1.3. 中文路径的问题.程序文件读取编码设置 1 1 ...

  4. 44.AngularJS Bootstrap

    转自:https://www.cnblogs.com/best/tag/Angular/ Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在 ...

  5. python-搭建django环境

    python-搭建django环境 标签(空格分隔): python Django简介 Django,发音为[`dʒæŋɡəʊ],是用python语言写的开源web开发框架,并遵循MVC设计.劳伦斯出 ...

  6. 数位$dp$

    数位\(dp\)搞了一上午才搞懂.靠这种傻\(X\)的东西竟然花了我一上午的时间. 数位\(dp\) 概念 数位\(dp\)就是强制你分类一些数,例如给你一段区间,然后让你求出不包含\(2\)的数的个 ...

  7. java9新特性-9-语法改进：try语句

    1. 使用举例 在java8 之前,我们习惯于这样处理资源的关闭:     java 8 中,可以实现资源的自动关闭,但是要求执行后必须关闭的所有资源必须在try子句中初始化,否则编译不通过.如下例所 ...

  8. OpenGL编程逐步深入（十一）组合变换

    准备知识 在前面的几节教程中,我们已经提到过几种变换,为物体在3D世界中的移动提供的极大的灵活性.但是我们还有很多东西需要学习(如摄像机控制和透视投影),你可以已经猜到,我们需要將这些变换组合起来.在 ...

  9. Android控件postDelayed用法,View自带的定时器

    有一个需求是这样的,点击加关注按钮后,执行关注操作,成功后按钮文字变为“已关注”,保持3秒,三秒后按钮文字便问“取消关注”,点击后执行取消关注的操作 源码: public boolean postDe ...

  10. 关于node的聊天室错误

    Deprecationwarning:process,EventEmitter is deprecated use require ('events')instead 关于node的聊天室错误 > ...