1.第一个Canvas程序
看的是HTML5移动开发即学即用这本书，首先学习Canvas基础，废话不多说，直接看第一个例子。
效果图为：
代码如下：
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello HTML5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 </body>
18 <script type="text/javascript">
19 //canvas对象的取得
20 var canvas=document.getElementById("c1");
21 //取得绘图用的上下文对象
22 var ctx=canvas.getContext("2d");
23 //绘图处理
24 ctx.fillStyle="rgb(255,0,0)";
25 ctx.fillRect(50,50,200,200);
26 ctx.fillStyle="rgba(0,0,255,0.5)";
27 ctx.fillRect(100,100,200,200);
28 <!--alert("hello");-->
29 </script>
30 </html>
知识点：
Canvas 的基本用法
1）取得Canvas对象
2）从Canvas对象中获取绘图用的上下文
3）使用上下文中的方法与属性进行绘图
颜色的指定方法
1）ctx.fillStyle="#FF0000";
2）ctx.fillStyle="rgb(255,0,0)";
3）ctx.fillStyle="rgba(0,0,255,0.5)"; 最后这个指透明度的。。。
2.路径
绘制一个简单的三角形，效果：
代码如下：
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello HTML5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 </body>
18 <script type="text/javascript">
19 //canvas对象的取得
20 var canvas=document.getElementById("c1");
21 //取得绘图用的上下文对象
22 var ctx=canvas.getContext("2d");
23 //路径绘制开始
24 ctx.beginPath();
25 //路径的绘制
26 ctx.moveTo(0,0);
27 ctx.lineTo(0,290);
28 ctx.lineTo(290,290);
29 //路径绘制结束
30 ctx.closePath();
31 //进行绘图处理
32 ctx.fillStyle="rgb(200,0,0)"
33 ctx.fill();
34 <!--alert("hello");-->
35 </script>
36 </html>
知识点：
控制路径时使用的方法：
1) beginPath() 重置路径的开始
2) closePath() 关闭到现在为止的路径
3) moveTo() 指定绘图开始时的基点（x,y）
4) lineTo() 绘制从前一次绘图位置到（x,y）的直线
绘制路径时使用的方法：
1）stroke() 绘制路径
2）fill()填充路径
指定绘图样式时使用的属性
1）fillStyle 指定填充时使用的颜色与样式
2）strokeStyle 指定路径的线颜色与样式
3）lineWidth 指定路径线的粗细
下面制作一个当用户触摸屏幕时在触摸位置绘制三角形的实例程序 （书上的是用户触摸屏幕时绘制，现在改一下，鼠标移动时在移动的位置绘制三角形）效果：
代码如下：
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=320,user-scalable=no" />
6 <style type="text/css">
7 canvas {
8 border-width: 5px;
9 border-style: dashed;
10 border-color: rgba(20, 126, 239, 0.50)
11 }
12 </style>
13
14 </head>
15 <body>
16 hello HTML5!
17 <canvas id="c1" width="300" height="300" ></canvas>
18 </body>
19
20 <script type="text/javascript">
21
22 function getPointOnCanvas(canvas, x, y) {
23 var bbox = canvas.getBoundingClientRect();
24 return { x: x - bbox.left * (canvas.width / bbox.width),
25 y: y - bbox.top * (canvas.height / bbox.height)};
26 }
27 //canvas对象的取得
28 var canvas=document.getElementById("c1");
29 //取得绘图用的上下文对象
30 var ctx=canvas.getContext("2d");
31 //设置Canvas的onmouse事件
32 canvas.onmousemove=function(event)
33 {
34 //取得鼠标移动处的坐标
35 var x=event.pageX;
36 var y=event.pageY;
37 var canvas=event.target;
38 var loc=getPointOnCanvas(canvas,x,y);
39 console.log("mouse down at point(x:"+loc.x+",y:"+loc.y+")");
40
41 var r=Math.random()*10+25;
42 //路径指定
43
44 ctx.beginPath();
45 ctx.moveTo(loc.x,loc.y);
46 ctx.lineTo(loc.x,loc.y+r);
47 ctx.lineTo(loc.x+r,loc.y+r);
48 ctx.lineTo(loc.x,loc.y);
49
50 //绘图
51 ctx.strokeStyle="red";
52 ctx.stroke();
53 };
54 </script>
55 </html>
遇到的问题，刚开始取不到鼠标移动处的坐标，借鉴了http://www.jb51.net/html5/89807.html 这里面的方法，把效果做出来了，注意console.log()的运用，看下代码运行时的效果：
3.颜色定义
这一小节感觉书上分得不太合理，我实现以下这个程序是为了熟练下JS代码
效果：
代码如下：
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=320,user-scalable=no" />
6 <style type="text/css">
7 canvas {
8 border-width: 5px;
9 border-style: dashed;
10 border-color: rgba(20, 126, 239, 0.50)
11 }
12 </style>
13 <script>
14 (function(){
15 window.addEventListener("load",function(){
16 var ctx=document.getElementById("c1").getContext("2d");
17 //圆1
18 ctx.beginPath();
19 ctx.arc(150,45,35,0,Math.PI*2,false);
20 ctx.fillStyle='rgba(192,80,77,0.7)';
21 ctx.fill();
22 ctx.strokeStyle='rgba(192,80,77,1)';
23 ctx.stroke();
24
25 //圆2
26 ctx.beginPath();
27 ctx.arc(125,95,35,0,Math.PI*2,false);
28 ctx.fillStyle='rgba(155,187,89,0.7)';
29 ctx.fill();
30 ctx.strokeStyle='rgba(155,187,89,1)';
31 ctx.stroke();
32
33 //圆3
34 ctx.beginPath();
35 ctx.arc(175,95,35,0,Math.PI*2,false);
36 ctx.fillStyle='rgba(128,100,162,0.7)';
37 ctx.fill();
38 ctx.strokeStyle='rgba(128,100,162,1)';
39 ctx.stroke();}, false);
40 })();
41 </script>
42 </head>
43 <body>
44 hello HTML5!
45 <canvas id="c1" width="300" height="150" ></canvas>
46 </body>
47 </html>
知识点：
1)描绘轮廓线
ctx.strokeStyle="#ff0000";
2)填充轮廓
ctx.fillStyle="#0000ff";
我自己从中练习的知识点应该是
1）匿名函数 (function(){})();的使用
2）window.addEventListener("load",function(){},false);
4.绘制方法的介绍
1) 绘制圆弧的arc()方法
arc()方法的语法如下：context.arc(x,y,半径,开始角度,结束角度,是否逆时针旋转);
从指定的开始角度开始至结束角度为止，按指定方向进行圆弧绘制。最后的参数为ture时，将按逆时针旋转。角度不是“度”，而是“弧度”。
效果：
代码如下：
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello HTML5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 <script type="text/javascript">
18 var canvas=document.getElementById("c1");
19 var ctx=canvas.getContext("2d");
20
21 //使用颜色填充矩形
22 ctx.fillStyle="#f00ff0";
23 ctx.fillRect(0,0,300,300);
24 //描绘圆弧
25 //路径开始
26 ctx.beginPath();
27 var startAngle=0;
28 var endAngle=120*Math.PI/180;
29 ctx.arc(100,100,100,startAngle,endAngle,false);
30
31 //绘制处理
32 ctx.strokeStyle="#ff0000";
33 ctx.lineWidth=3;
34 ctx.stroke();
35 </script>
36 </body>
37 </html>
写完后对arc()方法了解多一点了。x,y是圆心的坐标，现在可以想象得出是怎样画出来的。。。
2）绘制圆弧的arcTo()方法
arcTo()方法的语法如下：
context.arcTo(x1,y1,x2,y2,半径);
此方法的功能是，从路径的起点和终点分别向坐标(x1,y1)、(x2,y2)绘制直线后，在绘制指定半径的圆弧。
效果：
代码如下：
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello HTML5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 <script type="text/javascript">
18 var canvas=document.getElementById("c1");
19 var ctx=canvas.getContext("2d");
20
21 //使用颜色填充矩形
22 ctx.fillStyle="#f00ff0";
23 ctx.fillRect(0,0,300,300);
24 //描绘圆弧
25 //路径开始
26 ctx.beginPath();
27 ctx.moveTo(20,20);
28 ctx.arcTo(290,150,100,280,100);
29 ctx.lineTo(20,280);
30
31 //绘制处理
32 ctx.strokeStyle="#ff0000";
33 ctx.lineWidth=3;
34 ctx.stroke();
35 </script>
36 </body>
37 </html>
自己改了下坐标，效果加深对这个方法的理解。。。
3）quadraticCurveTo()与bezierCurveTo()方法
① quadraticCurveTo()方法用于绘制二元抛物线，其语法格式如下。
context.quadraticCurveTo(cpx,cpy,x,y);
绘制由最后指定的位置开始至坐标(x,y)的曲线。此时，使用控制点为(cpx,cpy)的二元抛物线进行连接，并将位置(x,y)追加到路径中。
② bezierCurveTo()方法用于绘制三元抛物线，语法格式为:
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
绘制由最后指定路径位置至指定位置的曲线。此时，使用控制点分别为(cp1x,cp1y),(cp2x,cp2y)的三元抛物线进行连接，并将位置(x,y)追加到路径中，具体示意图：（qq上对图片的修饰似乎还不够熟练。。。）
代码如下：
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello HTML5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 <script type="text/javascript">
18 var canvas=document.getElementById("c1");
19 var ctx=canvas.getContext("2d");
20
21 //使用颜色填充矩形
22 ctx.fillStyle="#f00ff0";
23 ctx.fillRect(0,0,300,300);
24 //描绘圆弧
25 //路径开始
26 ctx.beginPath();
27 ctx.moveTo(20,20);
28 ctx.bezierCurveTo(100,280,180,280,280,20);
29
30
31 //绘制处理
32 ctx.strokeStyle="#ff0000";
33 ctx.lineWidth=3;
34 ctx.stroke();
35 </script>
36 </body>
37 </html>
4）绘制矩形的rect()方法
语法格式如下：context.rect(x,y,宽度,高度); x,y为矩形左上角坐标
除此之外，Canvas中还提供了三种特定的矩形绘制方法；
① context.strokeRect(x,y,w,h) 绘制矩形的轮廓
② context.fillRect(x,y,w,h) 填充矩形
③ context.clearRect(x,y,w,h) 清空矩形
这个比较好理解就不做效果演示及代码。
5.绘制渐变效果
线性渐变与圆形渐变
线性渐变就是从左至右（或自上而下）依次显示逐渐变化的颜色。而圆形渐变自圆心向外围逐渐显示变化的颜色。
1）线性渐变
指定线性渐变时使用createLinearGradient()方法，具体语法如下：
//先创建CanvasGradient对象： CanvasGradient=context.createLinearGradient(x1,y1,x2,y2); 表示由位置(x1,y1)至位置(x2,y2)显示渐变效果
//然后追加渐变颜色：CanvasGradient.addColorStop(颜色开始的相对位置,颜色); 指定渐变中使用的颜色,第一个参数（开始相对位置）中指定一个数字，从而决定什么位置使用什么颜色。
举个栗子：
代码为：
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello HTML5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 <script type="text/javascript">
18 var canvas=document.getElementById("c1");
19 var ctx=canvas.getContext("2d");
20
21 //绘图
22 var g=ctx.createLinearGradient(0,0,300,0);
23 g.addColorStop(0,"rgb(255,0,0)"); //开始位置设置为红色
24 g.addColorStop(1,"rgb(255,255,0)"); //黄色
25 ctx.fillStyle=g;
26 ctx.fillRect(20,20,260,260);
27 </script>
28 </body>
29 </html>
2）圆形渐变
绘制圆形渐变时，使用createRadialGradient()方法创建对象，同样使用addColorStop()方法追加渐变颜色。具体语法如下
//创建CanvasGradient对象 CanvasGradient=context.createRadialGradient(x1,y1,r1,x2,y2,r2); 通过参数指定以(x1,y1)为圆心，半径为r1的圆到以(x2,y2)为圆心，半径为r2的圆的渐变效果
// 追加渐变颜色 CanvasGradient.addColorStop(颜色开始的相对位置,颜色);
举个栗子
代码为：
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello HTML5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 <script type="text/javascript">
18 var canvas=document.getElementById("c1");
19 var ctx=canvas.getContext("2d");
20
21 //绘图
22 var g=ctx.createRadialGradient(150,150,50,150,150,100);
23 g.addColorStop(0.3,"red"); //开始位置设置为红色
24 g.addColorStop(0.7,"yellow");
25 g.addColorStop(1.0,"blue"); //黄色
26 ctx.fillStyle=g;
27 ctx.fillRect(20,20,260,260);
28 </script>
29 </body>
30 </html>
6.绘制图像
Canvas 中的图像绘制
图像绘制的基本步骤如下：
1）读取图像文件
2）在Canvas中进行绘制
图像读取前，首先创建Image对象，在Image对象的src属性中指定图像文件所在路径后就可以读取了。读取结束后，触发onload事件，基本语法如下：
var image=new Image();
image.src="图像文件路径";
image.onload=function(){//图像读取时的处理}
使用Canvas上下文中的drawImage()方法将读取后的Image对象绘制在Canvas上，实际上是将Image对象中的图像数据输出到Canvas中。有三种drawImage()方法用于图像的绘制
①直接绘制 context.drawImage(image,dx,dy)
②尺寸修改(resize) context.drawImage(image,dx,dy,dw,dh)
③图像截取 context.drawImage()
第①种方法直接将读取的图像绘制在坐标(dx,dy)处。第②种方法按照新的宽度dw与高度dh将图像绘制在坐标(dx,dy)处。第③种方法是将原图像的一部分截取出后再按指定尺寸绘制在Canvas上，从原图像的坐标(sx,sy)开始截取宽(sw),高(sh)的部分图像，然后绘制在Canvas上的坐标(dx,dy)处，宽度为dw,高度为dh。
像素处理
Canvas与SVG以及Flash稍有不同，绘制的图形/图像并不能作为对象操作。也就是说使用stroke()或者fill()方法绘制的图形，既不能移动它也不能删除它。如果想操作绘制的图形/图像，使用SVG或者Flash实现比使用Canvas要好。
Canvas中绘制的图形/图像作为一个整体的位图保存，因此可以访问各个像素信息。也就是说，可以使用JavaScript处理Canvas上绘制的图像像素信息。这是Canvas的一个特色
1）像素处理的API
imagedata=ctx.getImageData(sx,sy,sw,sh) 返回以(sx,sy)为左上顶点，宽为sw,高为sh的矩形图像-imagedata对象。
ctx.putImageData(imagedata,dx,dy) 将imagedata所表示的图像绘制在顶点坐标为(dx,dy)处。
简述之，使用getImageData()方法取出Canvas上图像的像素数据，通过JavaScript加工过这些像素数据后，使用putImageData方法，重新绘制到Canvas中。
ImageData对象是代表图像像素数据的对象。此对象定义了三种属性：
①imagedata.width 图像数据的宽度
②imagedata.height 图像数据的高度
③imagedata.data 图像数据（CanvasPixelArray类型）
在JavaScript中进行像素数据读取，并进行加工与输出时的具体操作是，从imagedata.data中得到CanvasPixelArray类型的对象。此对象是保存像素信息的一元数组。但是与JavaScript的Array对象不同，不可对其进行与通常数组一样的操作。
举个栗子：(本例中，当用户将桌面上的图像文件拖动到浏览器中后，首先读取图像文件并在浏览器中显示，接着对图像进行黑白变换，在原图的旁边显示变换后的图像)
用户将桌面上的图像文件拖动到浏览器中的界面：
进行黑白变换后的效果：
代码如下：
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 body{
7 font-family:宋体,Arial,Helvetica,sans-serif;
8 font-size:80%;
9 }
10 #dp{
11 width:200px;
12 min-height:70px;
13 border:1px solid #000000;
14 background-color:#eeeeee;
15 padding:len;
16 margin:2em;
17 }
18 #dp img{
19 margin-right:lem;
20 }
21 </style>
22 <script>
23 (function(){
24
25 //拖动区域的div元素
26 var dp=null;
27 //FileReader接口对象
28 var reader=null;
29
30 //页面导入时的处理
31 window.addEventListener("load",function(){
32 //获取拖动区域的div元素
33 dp=document.getElementById("dp");
34 //设置dragover事件的事件侦听
35 dp.addEventListener("dragover",function(evt){
36 evt.preventDefault();},false);
37 //设置drop事件的事件侦听
38 dp.addEventListener("drop",function(evt){
39 evt.preventDefault();
40 file_droped(evt);},false);
41 },false);
42
43 //文件被拖入时的处理
44 function file_droped(evt)
45 {
46 //清空显示区域
47 while(dp.firstChild)
48 {
49 dp.removeChild(dp.firstChild);
50 }
51 //拖动文件的File接口对象
52 var file=evt.dataTransfer.files[0];
53 //FileReader接口对象
54 reader=new FileReader();
55 //非图像文件画像时报错
56 if(!/^image/.test(file.type)){alert("请拖入图像文件");}
57 //导入拖入图像
58 reader.readAsDataURL(file);
59 reader.onload=prepare_image;
60 }
61
62 //显示拖入图像文件
63 function prepare_image(evt)
64 {
65 //创建img元素，显示拖入的图像
66 var image=document.createElement("img");
67 image.setAttribute("src",reader.result);
68 dp.appendChild(image);
69 //img元素中导入图像文档后进行后续处理
70 image.onload=function(){
71 //获取图像的尺寸
72 var w=parseInt(image.width);
73 var h=parseInt(image.height);
74 //创建canvas对象，导入图像
75 var canvas=document.createElement("canvas");
76 canvas.width=w;
77 canvas.height=h;
78 var ctx=canvas.getContext("2d");
79 ctx.drawImage(image,0,0);
80 //取得canvas像素数据
81 var imagedata=ctx.getImageData(0,0,w,h);
82
83 //进行黑白转换
84 convert_image_to_gray_scale(imagedata.data);
85
86 //替换canvas中的像素数据
87 ctx.putImageData(imagedata,0,0);
88
89 //显示canvas
90 dp.appendChild(canvas);
91 }
92 }
93
94 //黑白变换函数
95 function convert_image_to_gray_scale(data)
96 {
97 var len=data.length;
98 var pixels=len/4;
99 for(var i=0;i<pixels;i++){
100 //取出R,G,B值
101 var r=data[i*4];
102 var g=data[i*4+1];
103 var b=data[i*4+2];
104
105 //进行黑白变换
106 var t=parseInt((11*r+16*g+5*b)/32);
107 //将变换后的像素数据设置到原来数组元素中
108 data[i*4]=t;
109 data[i*4+1]=t;
110 data[i*4+2]=t;
111 }
112 }
113
114 })();
115 </script>
116
117 </head>
118 <body>
119 <div id="dp">
120 <p>将桌面图像文件拖动到此处。</p>
121 </div>
122 </body>
123 </html>
7.绘制数据图表
1）绘制方格图
绘制方格图是为了最终绘制折线数据图表做准备的，方格将作为折线图的基准线。绘制方格图的逻辑很简单，只要在Canvas上绘制一系列的横线和竖线。
效果：
代码如下：
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello HTML5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 <script type="text/javascript">
18 //获取上下文
19 var canvas=document.getElementById("c1");
20 var ctx=canvas.getContext("2d");
21
22 //描绘背景
23 var gradient=ctx.createLinearGradient(0,0,0,300);
24 gradient.addColorStop(0,"#e0e0e0");
25 gradient.addColorStop(1,"#ffffff");
26 ctx.fillStyle=gradient;
27 ctx.fillRect(0,0,canvas.width,canvas.height);
28
29 //描绘边框
30 var grid_cols=10;
31 var grid_rows=10;
32 var cell_height=canvas.height/grid_rows;
33 var cell_width=canvas.width/grid_cols;
34 ctx.lineWidth=1;
35 ctx.strokeStyle="#a0a0a0";
36
37 ctx.beginPath();
38
39 //准备画竖线
40 for( var col=0;col<=grid_cols;col++)
41 {
42 var x=col*cell_width;
43 ctx.moveTo(x,0);
44 ctx.lineTo(x,canvas.height);
45 }
46
47 //准备画横线
48 for( var row=0;row<=grid_rows;row++)
49 {
50 var y=row*cell_height;
51 ctx.moveTo(0,y);
52 ctx.lineTo(canvas.width,y);
53 }
54
55 //完成描绘
56 ctx.stroke();
57 </script>
58 </body>
59 </html>
接着我们在方格图中追加绘制数据图表，此处用到的数据为某种商品12个月内的销售数量，涉及的实例数据如下：
| 1月 | 2月 | 3月 | 4月 | 5月 | 6月 | 7月 | 8月 | 9月 | 10月 | 11月 | 12月 |
| 80 | 92 | 104 | 110 | 68 | 50 | 45 | 90 | 74 | 68 | 98 | 103 |
效果图为：
代码如下：
1 <!DOCTYPE html>View Code 8.旋转与变形 1）变形方法 ① 变形方法中的旋转/移动相关方法 setTransform(m11,m12,m21,m22,dx,dy) 变形矩阵的指定(清空先前的指定) Transform(m11,m12,m21,m22,dx,dy) 变形矩阵的指定（可重复指定） rotate(angle) 旋转 scale(x,y) 扩大/缩小 说明：参数x为长度缩放的比例，y为宽度缩放的比例 translate(x,y) 移动/变形 说明：(x,y)为基点移动后的坐标 setTransform()与transform()的区别是，是否对已经设置的变形矩阵清空。transform()方法可重复指定不同效果的变形矩阵，而setTransform()方法被调用将清空原先设置的变形矩阵。另外，提供旋转或扩大/缩小功能的方法都支持重叠变形矩阵。 ② 变形矩阵进行保存/恢复的方法 save() 记录变形矩阵的状态 restore() 恢复变形矩阵的状态 先看移动，扩大/缩小的栗子： 在Canvas中实现模拟时钟的程序 效果：
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello HTML5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 <script type="text/javascript">
18 //获取上下文
19 var canvas=document.getElementById("c1");
20 var ctx=canvas.getContext("2d");
21
22 //定义图表数据
23 var uriage=[80,92,104,110,68,50,45,90,74,68,98,103];
24
25 //描绘背景
26 var gradient=ctx.createLinearGradient(0,0,0,300);
27 gradient.addColorStop(0,"#e0e0e0");
28 gradient.addColorStop(1,"#ffffff");
29 ctx.fillStyle=gradient;
30 ctx.fillRect(0,0,canvas.width,canvas.height);
31
32 //描绘边框
33 var grid_cols=uriage.length+1;
34 var grid_rows=4;
35 var cell_height=canvas.height/grid_rows;
36 var cell_width=canvas.width/grid_cols;
37
38 ctx.beginPath();
39
40 //准备画竖线
41 for( var col=0;col<=grid_cols;col++)
42 {
43 var x=col*cell_width;
44 ctx.moveTo(x,0);
45 ctx.lineTo(x,canvas.height);
46 }
47
48 //准备画横线
49 for( var row=0;row<=grid_rows;row++)
50 {
51 var y=row*cell_height;
52 ctx.moveTo(0,y);
53 ctx.lineTo(canvas.width,y);
54 }
55
56 //完成描绘
57 ctx.lineWidth=1;
58 ctx.strokeStyle="#a0a0a0";
59 ctx.stroke();
60
61 //获取数据中最大值
62 var max_v=0;
63 for(var i=0;i<uriage.length;i++)
64 {
65 if(uriage[i]>max_v)
66 max_v=uriage[i];
67 }
68 //为了能让最大值容纳在图表内，计算坐标
69 max_v=max_v*1.1;
70 //将数据换算为坐标
71 var points=[];
72 for(var i=0;i<uriage.length;i++)
73 {
74 var v=uriage[i];
75 var px=cell_width*(i+1);
76 var py=canvas.height-canvas.height*(v/max_v);
77 points.push({"x":px,"y":py});
78 }
79 //描绘折线
80 ctx.beginPath();
81 ctx.moveTo(points[0].x,points[0].y);
82 for(var i=1;i<points.length;i++)
83 {
84 ctx.lineTo(points[i].x,points[i].y);
85 }
86 ctx.lineWidth=2;
87 ctx.strokeStyle="#ee0000";
88 ctx.stroke();
89
90 //绘制坐标图形
91 for(var i in points)
92 {
93 var p=points[i];
94 ctx.beginPath();
95 ctx.arc(p.x,p.y,6,0,2*Math.PI);
96 ctx.fillStyle="#ee0000";
97 ctx.fill();
98 }
99 </script>
100 </body>
101 </html>
代码：
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12 <script>
13 (function(){
14 //canvas元素对象
15 var canvas=null;
16 //canvas的2D上下文
17 var ctx=null;
18 //canvas的尺寸
19 var cw=0;
20 var ch=0;
21
22 //页面导入时的事件处理
23 window.addEventListener("load",function(){
24 //canvas元素的对象
25 canvas=document.getElementById("c1");
26 //canvas的2D上下文
27 ctx=canvas.getContext("2d");
28 // 获取canvas的尺寸
29 cw=parseInt(canvas.width);
30 ch=parseInt(canvas.height);
31 //将坐标平面向右下移动
32 ctx.translate(cw/2,ch/2);
33 //绘制时钟
34 draw_watch();
35 }
36 ,false);
37
38 function draw_watch()
39 {
40 //清空Canvas
41 ctx.clearRect(-cw/2,-ch/2,cw,ch);
42 //计算针的最大长度
43 var len=Math.min(cw,ch)/2;
44 //绘制刻度盘
45 var tlen=len*0.85;
46 ctx.font="14px 'Arial'";
47 ctx.fillStyle="black";
48 ctx.textAlign="center";
49 ctx.textBaseline="middle";
50 for(var i=0;i<12;i++)
51 {
52 var tag1=Math.PI*2*(3-i)/12;
53 var tx=tlen*Math.cos(tag1);
54 var ty=-tlen*Math.sin(tag1);
55 ctx.fillText(i,tx,ty);
56 }
57
58 //获取当前时刻的时，分，秒
59 var d=new Date();
60 var h=d.getHours();
61 var m=d.getMinutes();
62 var s=d.getSeconds();
63 if(h>12)
64 {h=h-12;}
65 //绘制时针，短
66 var angle1=Math.PI*2*(3-(h+m/60))/12;
67 var length1=len*0.5;
68 var width1=5;
69 var color1="#000000";
70 drawhand(angle1,length1,width1,color1);
71 //绘制分针，长
72 var angle2=Math.PI*2*(15-(m+s/60))/60;
73 var length2=len*0.5;
74 var width2=5;
75 var color2="#000000";
76 drawhand(angle2,length2,width2,color2);
77 //绘制秒针
78 var angle3=Math.PI*2*(15-s)/60;
79 var length3=len*0.5;
80 var width3=5;
81 var color3="#000000";
82 drawhand(angle3,length3,width3,color3);
83
84 //设置timer
85 setTimeout(draw_watch,1000);
86 }
87
88 //针绘制函数
89 function drawhand(angle,len,width,color)
90 {
91 //计算针端的坐标
92 var x=len*Math.cos(angle);
93 var y=-len*Math.sin(angle);
94
95 //绘制针
96 ctx.strokeStyle=color; //设置颜色
97 ctx.lineWidth=width; //设置线的粗细
98 ctx.lineCap="round";//将针尖设置为圆形
99 ctx.beginPath();
100 ctx.moveTo(0,0);
101 ctx.lineTo(x,y);
102 ctx.stroke();
103 }
104 })();
105 </script>
106 </head>
107 <body>
108 hello HTML5!
109 <canvas id="c1" width="300" height="300" ></canvas>
110 </body>
111 </html>
代码解释:上述代码的解释
首先看页面导入时的事件处理代码：
window.addEventListener("load",function()
{
...
//将坐标平面向右下移动
ctx.translate(cw/2,ch/2);
//绘制时钟
draw_watch();
},false);
上述代码中，使用translate()方法将绘图基点移动到Canvas的中心（向右移动一半宽度距离，向下移动一半高度距离）。后面进行绘图处理时，坐标(0,0)就变成Canvas的中心，将大大简化时钟坐标的计算。（巧妙之处）
再看下draw_watch()函数
第一行是清空Canvas区域，因为程序中将每隔1秒钟重新绘制整个模拟时针，以实现动态时针的动画效果，如果不清空，上次的秒针将一直被保留
ctx.clearRect(-cw/2,-ch/2,cw,ch);
clearRect()方法的参数依次为区域左上角x,y坐标，区域宽度，区域高度。因为坐标平面已经移动，所以作为基点的左上角的坐标变成(-cw/2,-ch/2)
然后是，绘制刻度盘的代码
for(var i=0;i<12;i++)
{
var tag1=Math.PI*2*(3-i)/12;
var tx=tlen*Math.cos(tag1);
var ty=-tlen*Math.sin(tag1);
ctx.fillText(i,tx,ty);
}
从0时到11时的时刻数字由fillText()完成绘制
这里终点关注坐标的计算，因中心坐标是(0,0),所以只要确定好角度和半径，就可以计算出各个时刻的坐标来（注意在刻度盘数字3的位置的角度是0度）
所以这个计算公式 var angle1=Math.PI*2*(3-(h+m/60))/12;也就好理解了。同理分针和秒针也一样。
然后要完成没过1秒要更新的效果，这时用到定时函数setTimeout(draw_watch,1000);表示每过一秒钟循环调用draw_watch函数自身。
2）变形的保存于恢复
① 变形的保存与恢复的方法save()与restore()的语法格式如下
context.save();
context.restore();
这两种方法都是基于同一堆栈(stack)构造。调用save()方法后，将变形结果保存于堆栈顶端，调用restore()方法后，从堆栈顶端取出上次保存的结果用于恢复。
看一个栗子，结合了save()，restore(),及rotate()方法
效果：
代码如下：
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello HTML5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 <script type="text/javascript">
18 //获取上下文
19 var canvas=document.getElementById("c1");
20 var ctx=canvas.getContext("2d");
21
22
23 //定义绘制矩形的方法
24 function drawRect(context,color)
25 {
26 context.fillStyle=color;
27 context.fillRect(0,0,100,30);
28 }
29
30 //定义旋转函数
31 function rorateDeg(context,deg)
32 {
33 alert(context);
34 alert(deg);
35 var rad=deg*Math.PI/180;
36 context.rotate(rad);
37 }
38
39 //绘制普通的矩形 ---1 画出第一个矩形
40 drawRect(ctx,"red");
41
42 //指定移动、旋转后绘图
43 ctx.save();
44 ctx.translate(100,30);//旋转基点
45 rorateDeg(ctx,45);//旋转45度
46 drawRect(ctx,"blue"); //---2 画出第二个矩形
47 ctx.restore();//恢复状态
48
49 //指定移动，旋转后绘图
50 ctx.save();
51 ctx.translate(200,50);//旋转基点
52 rorateDeg(ctx,90);//旋转45度
53 drawRect(ctx,"green");//---3 画出第三个矩形
54 ctx.restore();//恢复状态
55 </script>
56 </body>
57 </html>
②变形矩阵
与变形矩阵相关的方法有两个，即transform()与setTransform()方法。
语法为：
setTransform(m11,m12,m21,m22,dx,dy) 变形矩阵的指定(清空先前的指定)
Transform(m11,m12,m21,m22,dx,dy) 变形矩阵的指定（可重复指定） 其中的参数可变换为如下矩阵，这正是变形矩阵这个名称的由来 m11 m21 dx m12 m22 dy 0 0 1简单介绍下各个参数： 1）m11的默认值为1，当此值越大时，以canvas区域的左侧面为基准，向右延伸坐标空间。相反当值比1小时，向左侧收缩坐标空间。为0时，实际坐标空间完全消失。但是当为负数时，坐标空间变成以右侧为基准，向左侧延伸。2）m12的默认值为1，当此值越大时，以canvas区域的左侧面为基准，坐标空间向右下方倾斜。相反为负数时，坐标空间向右上方倾斜。3）m21的默认值为1，当此值越大时，以canvas区域的上侧面为基准，坐标空间向右下方倾斜。相反为负数时，坐标空间向右上方倾斜。4）m21的默认值为1，当此值越大时，以canvas区域的上侧面为基准，向下延伸坐标空间。向上侧收缩坐标空间。为0时，实际坐标空间完全消失。但是当为负数时，坐标空间变成以下侧为基准，向上侧延伸。5）参数dx的默认值为0.当此值越大时，Canvas的坐标空间向右移动。相反为负数时，向左移动。6）参数dy的默认值为0.当此值越大时，Canvas的坐标空间向下移动。相反为负数时，向上移动。 然后看一个使用setTransform()方法实现图标图像立体旋转的动画效果的栗子（效果正是太赞了，看着效果，我欣慰地笑了好久，哎呦，不错哦。。。） 效果：
代码：1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello HTML5!
16 <img src="XiaoKeAi.jpg" width="200" height="200" alt="小可爱" id="xka"/>
17 <script type="text/javascript">
18 (function(){
19 //不支持window.addEventListener的浏览器不执行代码
20 if(!window.addEventListener)
21 {
22 return;
23 }
24 //Canvas对象
25 var canvas=null;
26 //canvas的上下文对象
27 var ctx=null;
28 //动画的帧率
29 var fps=60;
30 //图像对象
31 var image=null;
32 //旋转角度
33 var deg=0;
34
35 //页面导入时的事件处理
36 window.addEventListener("load",function(){
37 //img元素
38 image=document.getElementById("xka");
39 //图像尺寸
40 var w=parseInt(image.width);
41 var h=parseInt(image.height);
42 //创建canvas对象
43 canvas=document.createElement("canvas");
44 canvas.width=w;
45 canvas.height=h;
46 //canvas的上下文对象
47 ctx=canvas.getContext("2d");
48 //不支持canvas的浏览器返回
49 if(!ctx)
50 {
51 return;
52 }
53 //将图像绘制入canvas中
54 ctx.drawImage(image,0,0);
55 //用canvas替换img元素
56 image.parentNode.replaceChild(canvas,image);
57 //canvas的动画开始
58 move();
59 }
60 ,false);
61 function move()
62 {
63 //canvas尺寸
64 var cw=parseInt(canvas.width);
65 var ch=parseInt(canvas.height);
66 //初始化变形矩阵
67 ctx.setTransform(1,0,0,1,0,0);
68 //清空canvas
69 ctx.clearRect(0,0,cw,ch);
70 //计算变形矩阵
71 var m11=Math.cos(deg*Math.PI/180);
72 var dx=(cw/2)-(cw*m11/2);
73 //变形矩阵设置
74 ctx.setTransform(m11,0,0,1,dx,0);
75 //将变形后的图像绘制入canvas中
76 ctx.drawImage(image,0,0);
77 //旋转角度递增
78 deg++;
79 deg=deg%360;
80 //使用timer定时绘制下一副图
81 setTimeout(move,1000/fps);
82 }
83 })();
84 </script>
85 </body>
86 </html>
代码解释：
//页面导入时的事件处理
window.addEventListener("load",function(){
...
//将图像绘制入canvas中
ctx.drawImage(image,0,0);
//用canvas替换img元素
image.parentNode.replaceChild(canvas,image);
//canvas的动画开始
move();
}
,false);
首先将显示图标的img元素的根对象作为参数传递给drawImage()方法，将图像粘贴到canvas上，随后调用repalceChild()方法将img元素替换为Canvas元素。此时img元素并没有从文档中消失，img元素的跟对象可以用于绘制各桢，可以无限多次使用。
然后再看下move()函数
//初始化变形矩阵
ctx.setTransform(1,0,0,1,0,0);
//清空canvas
ctx.clearRect(0,0,cw,ch);
首先将变形矩阵恢复为默认值，這是为了下一个清空Canvas区域时便于坐标计算。
接着计算将向setTransform()方法中传入的各参数值。为了Canvas坐标平面看起来像在立体的旋转，只需要变动m11和dx即可。
var m11=Math.cos(deg*Math.PI/180);
var dx=(cw/2)-(cw*m11/2);
然后再设置
ctx.setTransform(0,1,m11,0,dx,0);
最后
//将变形后的图像绘制入canvas中
ctx.drawImage(image,0,0);
就OK啦。。。
需要连续处理所以又借助了setTimeout函数。。这个不解释了。。。上述代码的解释9.绘制文本 绘制文本相关的方法和属性
| 方法 | 说明 |
| context.fillText(text,x,y) | 描绘文本，参数text是将要描绘的文本，参数x与y指定了描绘位置的坐标。默认情况下以描绘对象文本的左下为基准 |
| context.fillText(text,x,y,maxWidth) | 描绘文本，参数maxWidth是可选的，指定数值后，文本将显示在指定的宽度内，可缩小显示。 |
| context.strokeText(text,x,y) | 描绘文件的轮廓 |
| context.strokeText(text,x,y,maxWidth) | 描绘文件的轮廓 |
| 属性 | 说明 |
| context.font | 定义文本的样式。与CSS的font属性设置的内容相同 |
| context.textAlign | 定义文本的对齐方式，可指定start,end,left,right,center等，水平方向的基准 |
| context.textBaseline | 定义文件的基准线。可指定top,hanging（罗马字上缘）,middle,alphabetic（罗马字基线）,bottom,ideographic(罗马字下缘)等，垂直方向的基准 |
代码：1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello HTML5!
16 <canvas id="c1" width="400" height="300" ></canvas>
17 <table id="tb1">
18 <caption>会员数的变化</caption>
19 <thead>
20 <tr>
21 <th>公元</th>
22 <th>2003年</th>
23 <th>2004年</th>
24 <th>2005年</th>
25 <th>2006年</th>
26 <th>2007年</th>
27 <th>2008年</th>
28 <th>2009年</th>
29 </tr>
30 </thead>
31 <tbody>
32 <tr>
33 <th>会员数</th>
34 <th>230</th>
35 <th>360</th>
36 <th>459</th>
37 <th>654</th>
38 <th>834</th>
39 <th>956</th>
40 <th>1,085</th>
41 </tr>
42 </tbody>
43 </table>
44
45 <script type="text/javascript">
46 (function(){
47 //不支持window.addEventListener的浏览器不执行代码
48 if(!window.addEventListener)
49 {
50 return;
51 }
52 //Canvas对象
53 var canvas=null;
54 //canvas的上下文对象
55 var ctx=null;
56
57 //页面导入时的事件处理
58 add_event_listener(window,"load",function(){
59 //取得canvas对象
60 var canvas=document.getElementById("c1");
61
62 //取得table元素的根对象
63 var mytb=document.getElementById("tb1");
64
65 //绘制图表
66 draw_graph(mytb,canvas);
67 }
68 );
69
70 //图表绘制
71 function draw_graph(tb,canvas)
72 {
73 //获取canvas的上下文
74 var ctx=canvas.getContext("2d");
75
76 //取得横轴的显示文字
77 var head_cells=tb.tHead.rows[0].cells;
78
79 var heads=[];
80 for(var i=1;i<head_cells.length;i++)
81 {
82 heads.push(head_cells[i].innerHTML);
83 }
84 //取得值，计算最大值
85 var max=0;
86 var value_cells=tb.tBodies[0].rows[0].cells;
87 var values=[];
88 for( var i=1;i<head_cells.length;i++)
89 {
90 var v=value_cells[i].innerHTML;
91 v=parseInt(v.replace(/[^\d]/g,"")); //正则表达式，将非数字的字符替换为空格
92 values.push(v);
93 if(v>max)
94 {
95 max=v;
96
97 }
98 }
99 //定义图表原点
100 var basex=parseInt(canvas.width*0.1);
101 var basey=parseInt(canvas.height*0.8);
102 //计算图表的宽度与高度
103 var gw=parseInt(canvas.width*0.8);
104 var gh=parseInt(canvas.height*0.7);
105 //绘制图表区域的背景
106 ctx.fillStyle="#eeeeee";
107 ctx.fillRect(basex,basey-gh,gw,gh);
108 //显示轴
109 ctx.beginPath();
110 ctx.moveTo(basex,basey-gh);
111 ctx.lineTo(basex,basey);
112 ctx.lineTo(basex+gw,basey);
113 ctx.strokeStyle="#666666";
114 ctx.stroke();
115 //定义文字的字型
116 ctx.font="12px '黑体'";
117 //描绘图表
118 for(var i=0;i<heads.length;i++)
119 {
120 //取得图表的值
121 var v=values[i];
122 //竖线中心x坐标
123 var x=basex+(gw/heads.length)*i+((gw/heads.length)/2);
124 //定义竖线的宽度
125 var barw=(gw/heads.length)*0.7;
126 //定义竖线的高度
127 var barh=gh*0.9*(v/max);
128 //绘制竖线
129 ctx.fillStyle="green";
130 ctx.fillRect(x-barw/2,basey-barh,barw,barh);
131 //检查fillText()方法是否存在
132 if(!ctx.fillText)
133 {
134 continue;
135 }
136 //间隔与值显示宽度的最大值
137 var tw=(gw/heads.length)*0.9;
138 //将文本的坐标基准设置为center
139 ctx.textAlign="center";
140 //绘制X轴
141 ctx.textBaseline="top";
142 ctx.fillStyle="black";
143 ctx.fillText(heads[i],x,basey+3,tw);
144 //绘制值
145 ctx.textBaseline="ideographic";
146 ctx.fillStyle="black";
147 ctx.fillText(v,x,basey-barh-3,tw);
148 }
149 }
150 function add_event_listener(elm,type,func)
151 {
152 if(!elm)
153 {
154 return false;
155 }
156 if(elm.addEventListener)
157 {
158 elm.addEventListener(type,func,false);
159 }
160 else if(elm.attachEvent)
161 {
162 elm.attachEvent('on'+type,func);
163 }
164 else
165 {
166 return false;
167 }
168 return true;
169 }
170 })();
171 </script>
172 </body>
173 </html>
10.动画效果
介绍两种动画的实现实例
1）圆球跳动的动画
效果：
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello HTML5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 <script type="text/javascript">
18 //获取上下文
19 var canvas=document.getElementById("c1");
20 var ctx=canvas.getContext("2d");
21
22 //记录圆球的状态
23 var ball={x:10,y:100,dir_x:5,dir_y:5};
24 //动画
25 setInterval(drawBall,100);//每个100毫秒调用一次drawBall()函数
26 function drawBall()
27 {
28 //绘制背景
29 ctx.fillStyle="yellow";
30 ctx.fillRect(0,0,300,300);
31 //绘制圆球
32 ctx.beginPath();
33 ctx.arc(ball.x,ball.y,15,0,2*Math.PI,true);
34 ctx.fillStyle="red";
35 ctx.fill();
36 //让圆球运动起来
37 ball.x+=ball.dir_x;
38 ball.y+=ball.dir_y;
39 if(ball.x<0||ball.x>300)
40 {
41 ball.dir_x*=-1;
42 }
43 if(ball.y<0||ball.y>300)
44 {
45 ball.dir_y*=-1;
46 }
47 }
48 </script>
49 </body>
50 </html>
2）待机动画
效果：
代码：
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello HTML5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 <script type="text/javascript">
18 //获取上下文
19 var canvas=document.getElementById("c1");
20 var ctx=canvas.getContext("2d");
21
22 //动画绘制开始
23 var ci=0;
24 anim();
25 //定义动画函数
26 function anim()
27 {
28 ctx.clearRect(0,0,300,300);//清空Canvas
29 //循环绘制36根长方形棒棒
30 for(var i=0;i<36;i++)
31 {
32 ctx.save();
33 //旋转
34 var r=(i*10)*Math.PI/180;
35 ctx.translate(150,150);//移动中心点
36 ctx.rotate(r);
37 //绘制细长方形
38 if(i==ci)
39 {
40 ctx.globalAlpha=1.0;//半透明效果
41 }
42 else
43 {
44 ctx.globalAlpha=0.3
45 }
46 ctx.beginPath();
47 ctx.fillStyle="red";
48 ctx.rect(0,0,50,6);
49 ctx.fill();
50 ctx.restore();
51 }
52 ci=(ci+1)%36;
53 setTimeout(anim,20);//每隔20微秒调用anim函数，实现动画效果
54 }
55 </script>
56 </body>
57 </html>
结语：终于将Canvas这章知识点学完，HTML5很好，很强大，很好玩~~