html5canvas详细使⽤教程
原作很强悍
导航
前⾔
基本知识
绘制矩形
清除矩形区域
圆弧
路径
绘制线段
绘制贝塞尔曲线
js控制css3动画触发
线性渐变
径向渐变（发散）
图形变形（平移、旋转、缩放）
矩阵变换（图形变形的机制）
图形组合
给图形绘制阴影
绘制图像（图⽚平铺、裁剪、像素处理[不只图像、包括其他绘制图形]）
绘制⽂字
保存和恢复状态（context）
保存⽂件
结合setInterval制作动画
结语、demo下载
前⾔
<canvas></canvas>是html5出现的新标签，像所有的dom对象⼀样它有⾃⼰本⾝的属性、⽅法和事件，其中就有绘图的⽅法，js能够调⽤它来进⾏绘图，最近在研读《html5与css3权威指南》下⾯对其中最好玩的canvas的学习做下读书笔记与实验。
温馨提⽰：以下所有实验请使⽤最新版的opera
基本知识
context:⼀直觉得这个翻译成“上下⽂”真够蛋疼的，context是⼀个封装了很多绘图功能的对象，获取这个对象的⽅法是
var context =Context("2d");
也许这个2d勾起了⼤家的⽆限遐想，但是很遗憾的告诉你html5还只是个少⼥，不提供3d服务。
canvas元素绘制图像的时候有两种⽅法，分别是
context.fill()//填充
context.stroke()//绘制边框
style：在进⾏图形绘制前，要设置好绘图的样式
context.fillStyle//填充的样式
context.strokeStyle//边框样式
context.lineWidth//图形边框宽度
颜⾊的表⽰⽅式:
直接⽤颜⾊名称:"red" "green" "blue"
⼗六进制颜⾊值: "#EEEEFF"
rgb(1-255,1-255,1-255)
rgba(1-255,1-255,1-255，透明度)
和GDI是如此的相像，所以⽤过GDI的朋友应该很快就能上⼿
绘制矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height)
x：矩形起点横坐标（坐标原点为canvas的左上⾓，当然确切的来说是原始原点，后⾯写到变形的时候你就懂了，现在暂时不⽤关系） y：矩形起点纵坐标
width：矩形长度
height：矩形⾼度
View Code
1function draw21(id) {
2var canvas = ElementById(id)
3if (canvas == null)
4return false;
5var context = Context("2d");
6//实践表明在不设施fillStyle下的默认fillStyle=black
7 context.fillRect(0, 0, 100, 100);
8//实践表明在不设施strokeStyle下的默认strokeStyle=black
9 context.strokeRect(120, 0, 100, 100);
10
11//设置纯⾊
12 context.fillStyle = "red";
13 context.strokeStyle = "blue";
14 context.fillRect(0, 120, 100, 100);
15 context.strokeRect(120, 120, 100, 100);
16
17//设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯⾊，值<=0时为完全透明
18 context.fillStyle = "rgba(255,0,0,0.2)";
19 context.strokeStyle = "rgba(255,0,0,0.2)";
20 context.fillRect(240,0 , 100, 100);
21 context.strokeRect(240, 120, 100, 100);
22 }
清除矩形区域 context.clearRect(x,y,width,height)
x：清除矩形起点横坐标
y：清除矩形起点纵坐标
width：清除矩形长度
height：清除矩形⾼度
View Code
1function draw22(id) {
2var canvas = ElementById(id)
3if (canvas == null)
4return false;
5var context = Context("2d");
6//实践表明在不设施fillStyle下的默认fillStyle=black
7 context.fillRect(0, 0, 100, 100);
8//实践表明在不设施strokeStyle下的默认strokeStyle=black
9 context.strokeRect(120, 0, 100, 100);
10
11//设置纯⾊
12 context.fillStyle = "red";
13 context.strokeStyle = "blue";
14 context.fillRect(0, 120, 100, 100);
15 context.strokeRect(120, 120, 100, 100);
16
17//设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯⾊，值<=0时为完全透明
18 context.fillStyle = "rgba(255,0,0,0.2)";
19 context.strokeStyle = "rgba(255,0,0,0.2)";
20 context.fillRect(240, 0, 100, 100);
21 context.strokeRect(240, 120, 100, 100);
22 context.clearRect(50, 50, 240, 120);
23 }
圆弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)
x：圆⼼的x坐标
y：圆⼼的y坐标
straAngle：开始⾓度
endAngle：结束⾓度
anticlockwise：是否逆时针（true）为逆时针，(false)为顺时针
ps：经过试验证明书本上ture是顺时针，false是逆时针是错误的，⽽且⽆论是逆时针还是顺时针，⾓度都沿着顺时针扩⼤，如下图：
View Code
1function draw0(id) {
2var canvas = ElementById(id);
3if (canvas == null) {
4return false;
5 }
6var context = Context('2d');
7 context.beginPath();
8 context.arc(200, 150, 100, 0, Math.PI * 2, true);
9//不关闭路径路径会⼀直保留下去，当然也可以利⽤这个特点做出意想不到的效果
10 context.closePath();
11 context.fillStyle = 'rgba(0,255,0,0.25)';
12 context.fill();
13 }
⼀不⼩⼼画了⼩⽇本的国旗...赶紧调下颜⾊和⼤⼩，绿⾊倒是挺合适的~
路径 context.beginPath() context.closePath()
细⼼的朋友会发现上⾯的画圆并不单单是直接⽤arc还⽤到了context的 beginPath 和closePath⽅法，参考书不愧是参考书，例⼦给得太简单了，实话说⼀开始我凌乱了，耐⼼下来做了⼏个实验才舒缓蛋疼的⼼情
实验代码如下，通过分别注释closePath 和beginPath看fill stoke 和fill stroke结合下画出来的两个1/4弧线达到实验效果
View Code
1function draw23(id) {
2var canvas = ElementById(id);
3if (canvas == null) {
4return false;
5 }
6var context = Context('2d');
7var n = 0;
8
9//左侧1/4圆弧
10 context.beginPath();
11 context.arc(100, 150, 50, 0, Math.PI/2 , false);
12 context.fillStyle = 'rgba(255,0,0,0.25)';
13 context.fill();
14 context.strokeStyle = 'rgba(255,0,0,0.25)'
15 context.closePath();
16 context.stroke();
17
18//右侧1/4圆弧
19 context.beginPath();
20 context.arc(300, 150, 50, 0, Math.PI/2 , false);
21 context.fillStyle = 'rgba(255,0,0,0.25)';
22 context.fill();
23 context.strokeStyle = 'rgba(255,0,0,0.25)';
24 context.closePath();
25 context.stroke();
26 }
实验结果如下：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论