兼容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文件夹下
兼容IE浏览器的canvas画线和圆圈的更多相关文章
- canvas 画线
一.canvas是基于状态的绘图环境 1.canvas是基于状态的绘制 context.moveTo(100,100); context.lineTo(700,700); context.lineWi ...
- HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 用canvas画“哆啦A梦”时钟
前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的canvas~欧耶~ 之前看到有人建议我画蓝胖子,对哦,我怎么把童年最喜欢的蓝胖子忘了,为了表达我对蓝胖子的歉意,所以今天画了会动的he ...
- 用canvas画简单的“我的世界”人物头像
前言:花了4天半终于看完了<Head First HTML5>,这本书的学习给我最大的感受就是,自己知识的浅薄,还有非常多非常棒的技术在等着我呢.[熊本表情]扶朕起来,朕还能学! H5新增 ...
- 纯JS画点、画线、画圆的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- H5中画图标签Canvas---画矩形,画线,画圆,渐变色,图形载入
一: 1.鼠标监视坐标值 <!DOCTYPE html> <head> <meta charset=UTF-8> <title>canvas的演示< ...
- vue仿京东画线验证码,前端手指位置数据获取
需求是这样的,京东H5移动端登录,有个安照箭头方向,画线登录的验证,看看是怎么实现的: 直接上代码了: <template> <div v-if="visible" ...
- Android中Path类的lineTo方法和quadTo方法画线的区别
转载:http://blog.csdn.net/stevenhu_223/article/details/9229337 当我们需要在屏幕上形成画线时,Path类的应用是必不可少的,而Path类的li ...
- 使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
随机推荐
- Redhat 6配置本地Yum源
注明:我的方法适用于iso镜像(光盘或光盘镜像:iso9660) 1.挂载(mount) 其它的mount方法可參见此链接 http://www.jb51.net/os/RedHat/1109.htm ...
- [LeetCode]Median of Two Sorted Arrays 二分查找两个有序数组的第k数(中位数)
二分.情况讨论 因为数组有序,所以能够考虑用二分.通过二分剔除掉肯定不是第k位数的区间.如果数组A和B当前处理的下标各自是mid1和mid2.则 1.假设A[mid1]<B[mid2], ①.若 ...
- bzoj1433: [ZJOI2009]假期的宿舍(最大二分图匹配)
1433: [ZJOI2009]假期的宿舍 题目:传送门 题解: 这题有点水 跑个二分图匹配就完事了(注意在校生不是一定都互相认识) 代码: #include<cstdio> #inclu ...
- iOS开发-sqlite3使用
SQLite3使用 SQLite简介 SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中. SQLite3 在XCode工程中,打开targets,在B ...
- hdoj--5567--sequence1(水题)
sequence1 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total ...
- 11.string容器
#include <iostream> //string的本质也是容器 #include <string> #include <cstdlib> using nam ...
- HBase的体系结构
- 08:Challenge 1
总时间限制: 10000ms 单个测试点时间限制: 1000ms 内存限制: 262144kB 描述 给一个长为N的数列,有M次操作,每次操作是以下两种之一: (1)修改数列中的一个数 (2)求 ...
- .net 操作INI文件
using System.Runtime.InteropServices; using System.Text; namespace FaureciaManager { public class Fi ...
- 位运算与bitset
&运算 将两个数转化为二进制后,对应的位置上相同即取,通常取1,所以&通常情况下可以用来枚举子集 设x为表示集合的整数,那么这个整数有如下性质: x的子集整数y在数值上不会比x大.因 ...