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. jsp urlrewrite 中正則表達式不包括某个字符串写法

    因在程序中须要做城市间跳转,可是页面中包括的css.scripts和图片等路径是要排除在外的. 这就须要在正则中指定当遇到哪些 字符时须要略过. 正则例如以下: /((? !css)(?!script ...

  2. 【Android】资源系列(二) -- 文件原样保留的资源assets和res/raw文件夹

    这两个文件夹都能够存放文件.而在打包的时候被原样保留. 那用这两个文件夹可以做什么事呢? 1.放一个apk,要用的时候调出来.免得去下载server下载. 2.放一个sql,当app数据库非常大的时候 ...

  3. Redis 存储图片 [base64/url/path]vs[object]

    一.base64图片编解码 基本流程:从网络获取下载一张图片.然后base64编码,再base64解码,存到本地E盘根文件夹下. import java.awt.image.BufferedImage ...

  4. Windows server 2008 布署FTP服务器实例（适用于阿里云）！

    Windows server 2008 布署FTP服务器实例(适用于阿里云). 1.打开管理.配置-用户-新建用户,如:ftp_user,并设置password.选择永只是期和password不能更改 ...

  5. ubuntu14.04下snort的安装（官方文档安装）（图文详解）

    不多说,直接上干货! 最近为了科研,需要安装和使用Snort. snort的官网 https://www.snort.org/ Snort作为一款优秀的开源主机入侵检测系统,在windows和Linu ...

  6. Java类和对象11

    首先,编写一个类ChongZai,该类中有3个重载的方法void print():其次,再编写一个主类来测试ChongZai类的功能. public class ChongZai { public v ...

  7. Swift学习笔记（1）：基础部分

    目录: 分号 常量和变量 数据类型 数值型类型转换 类型别名 元组 可选类型 API版本检查 分号 Swift并不强制要求你在每条语句的结尾处使用分号( ; ),你也可以按照自己的习惯添加分号.如果在 ...

  8. JavaScript 获取移动设备的型号

    https://joyqi.com/javascript/how-to-detect-mobile-devices-model-using-javascript.html?utm_source=too ...

  9. python-排序算法 冒泡和快速排序

    交换排序 交换排序有冒泡排序和快速排序 冒泡排序 冒泡排序就是每次找出最大(最小)元素,放在集合最前或最后,这是最简单的排序算法 print("未排序之前:",collection ...

  10. shiro整合thymeleaf

    1.引入依赖 <!--thymeleaf中使用shiro--> <dependency> <groupId>com.github.theborakompanioni ...