html5之canvas进阶

1）用路径绘图：

   beginPath()——开始一条新路径；

   closePath()——尝试闭合现有路径，方法是绘制一条线，连接最后那条线的终点与初始坐标；

   fill()——填充用子路径描述的图形；

   isPointInPath(x,y)——如果指定的点在当前路径所描述的图形之内则返回true；

   lineTo(x,y)——绘制一条到指定坐标的子路径；

   moveTo(x,y)——移动到指定坐标而不绘制子路径；

   rect(x,y,w,h)——绘制一个矩形，其左上角位于（x,y），宽度是w，高度是h;

   stroke()——给子路径描述的图形绘制轮廓线；

[css]  view plain copy

1. <style type="text/css">  
2.         canvas{  
3.             border:thin solid black;  
4.             margin: 4px;  
5.         }  
6.         body > *{  
7.             float: left;  
8.         }  
9.     </style>  

[html]  view plain copy

1. <canvas id="canvas1" width="500" height="140">  
2.         您的浏览器不支持<code>canvas</code>!  
3.     </canvas>  

[javascript]  view plain copy

1. <script>  
2.     //由直线创建路径  
3.     var ctx=document.getElementById("canvas1").getContext("2d");  
4.     ctx.fillStyle="#136455";  
5.     ctx.strokeStyle="blue";  
6.     ctx.lineWidth=4;  
7.   
8.     ctx.beginPath();  
9.     ctx.moveTo(10,10);  
10.     ctx.lineTo(110,10);  
11.     ctx.lineTo(110,120);  
12.     ctx.closePath();  
13.     ctx.fill();  
14.   
15.     ctx.beginPath();  
16.     ctx.moveTo(150,10);  
17.     ctx.lineTo(200,10);  
18.     ctx.lineTo(200,120);  
19.     ctx.lineTo(190,120);  
20.     ctx.fill();  
21.     ctx.stroke();  
22.   
23.     ctx.beginPath();  
24.     ctx.moveTo(250,10);  
25.     ctx.lineTo(250,120);  
26.     ctx.stroke();  
27. </script>  

lineCap——在绘制线条或闭合图形时设置线条末端的样式；

[html]  view plain copy

1. <canvas id="canvas2" width="500" height="140">  
2.     您的浏览器不支持<code>canvas</code>!  
3. </canvas>  

[javascript]  view plain copy

1. <script>  
2.     //设置lineCap属性  
3.     var ctx2=document.getElementById("canvas2").getContext("2d");  
4.     ctx2.strokeStyle="red";  
5.     ctx2.lineWidth=2;  
6.   
7.     ctx2.beginPath();  
8.     ctx2.moveTo(0,50);  
9.     ctx2.lineTo(200,50);  
10.     ctx2.stroke();  
11.   
12.     ctx2.strokeStyle="black";  
13.     ctx2.lineWidth=40;  
14.   
15.     var xpos=50;  
16.     var styles=["butt","round","square"];  
17.     for(var i=0;i<styles.length;i++){  
18.         ctx2.beginPath();  
19.         ctx2.lineCap=styles[i];  
20.         ctx2.moveTo(xpos,50);  
21.         ctx2.lineTo(xpos,150);  
22.         ctx2.stroke();  
23.         xpos+=50;  
24.     }  
25. </script>  

[html]  view plain copy

1. <canvas id="canvas3" width="500" height="140">  
2.     您的浏览器不支持<code>canvas</code>!  
3. </canvas>  

[javascript]  view plain copy

1. <script>  
2.     //用Rect方法绘制矩形  
3.     var ctx3=document.getElementById("canvas3").getContext("2d");  
4.     ctx3.fillStyle="yellow";  
5.     ctx3.strokeStyle="black";  
6.     ctx3.lineWidth=4;  
7.   
8.     ctx3.beginPath();  
9.     ctx3.moveTo(110,10);  
10.     ctx3.lineTo(110,100);  
11.     ctx3.lineTo(10,10);  
12.     ctx3.closePath();  
13.   
14.     ctx3.rect(110,10,100,90);  
15.     ctx3.rect(110,100,130,30);  
16.     ctx3.fill();  
17.     ctx3.stroke();  
18. </script>  

2）绘制圆弧：

   arc(x,y,rad,startAngle,endAngle,direction)——绘制一段圆弧到（x,y）,半径为rad,起始角度为                                     startAngle，结束角度为endAngle。可选参数direction指定了圆弧的方向;

   arcTo(x1,y1,x2,y2,rad)——绘制一段半径为rad,经过（x1,y1）,直到（x2,y2）的圆弧；

[html]  view plain copy

1. <canvas id="canvas4" width="500" height="140">  
2.     您的浏览器不支持<code>canvas</code>!  
3. </canvas>  

[javascript]  view plain copy

1. <script>  
2.     //使用arcTo方法  
3.     var ctx4=document.getElementById("canvas4").getContext("2d");  
4.     var point1=[100,10];  
5.     var point2=[200,10];  
6.     var point3=[200,110];  
7.   
8.     ctx4.fillStyle="yellow";  
9.     ctx4.strokeStyle="black";  
10.     ctx4.lineWidth=4;  
11.   
12.     ctx4.beginPath();  
13.     ctx4.moveTo(point1[0],point1[1]);  
14.     ctx4.arcTo(point2[0],point2[1],point3[0],point3[1],100);  
15.     ctx4.stroke();  
16.   
17.     drawPoint(point1[0],point1[1]);  
18.     drawPoint(point2[0],point2[1]);  
19.     drawPoint(point3[0],point3[1]);  
20.   
21.     ctx4.beginPath();  
22.     ctx4.moveTo(point1[0],point1[1]);  
23.     ctx4.lineTo(point2[0],point2[1]);  
24.     ctx4.lineTo(point3[0],point3[1]);  
25.     ctx4.stroke();  
26.   
27.     function drawPoint(x,y){  
28.         ctx4.lineWidth=1;  
29.         ctx4.strokeStyle="red";  
30.         ctx4.strokeRect(x-2,y-2,4,4);  
31.     }  
32. </script>  

[html]  view plain copy

1. <canvas id="canvas5" width="500" height="140">  
2.     您的浏览器不支持<code>canvas</code>!  
3. </canvas>  

[javascript]  view plain copy

1. <script>  
2.     //响应鼠标移动绘制圆弧  
3.     var canvasElem = document.getElementById("canvas5");  
4.     var ctx5 = canvasElem.getContext("2d");  
5.   
6.     var point1 = [100, 10];  
7.     var point2 = [200, 10];  
8.     var point3 = [200, 110];  
9.   
10.     draw();  
11.   
12.     canvasElem.onmousemove = function (e) {  
13.         if (e.ctrlKey) {  
14.             point1 = [e.clientX, e.clientY];  
15.         } else if(e.shiftKey) {  
16.             point2 = [e.clientX, e.clientY];  
17.         } else {  
18.             point3 = [e.clientX, e.clientY];  
19.         }  
20.         ctx5.clearRect(0, 0, 540, 140);  
21.         draw();  
22.     }  
23.   
24.     function draw() {  
25.   
26.         ctx5.fillStyle = "yellow";  
27.         ctx5.strokeStyle = "black";  
28.         ctx5.lineWidth = 4;  
29.   
30.         ctx5.beginPath();  
31.         ctx5.moveTo(point1[0], point1[1]);  
32.         ctx5.arcTo(point2[0], point2[1], point3[0], point3[1], 50);  
33.         ctx5.stroke();  
34.   
35.         drawPoint(point1[0], point1[1]);  
36.         drawPoint(point2[0], point2[1]);  
37.         drawPoint(point3[0], point3[1]);  
38.   
39.         ctx5.beginPath();  
40.         ctx5.moveTo(point1[0], point1[1]);  
41.         ctx5.lineTo(point2[0], point2[1]);  
42.         ctx5.lineTo(point3[0], point3[1]);  
43.         ctx5.stroke();  
44.     }  
45.   
46.     function drawPoint(x, y) {  
47.         ctx5.lineWidth = 1;  
48.         ctx5.strokeStyle = "red";  
49.         ctx5.strokeRect(x -2, y-2, 4, 4);  
50.     }  
51. </script>  

[html]  view plain copy

1. <canvas id="canvas6" width="500" height="140">  
2.     您的浏览器不支持<code>canvas</code>!  
3. </canvas>  

[javascript]  view plain copy

1. <script>  
2.     //使用arc方法  
3.     var ctx6=document.getElementById("canvas6").getContext("2d");  
4.     ctx6.fillStyle="yellow";  
5.     ctx6.lineWidth=3;  
6.   
7.     ctx6.beginPath();  
8.     ctx6.arc(70,70,60,0,Math.PI,true);  
9.     ctx6.stroke();  
10.     ctx6.beginPath();  
11.     ctx6.arc(200,70,60,Math.PI/2,Math.PI/4,false);  
12.     ctx6.fill();  
13.     ctx6.stroke();  
14.   
15.     ctx6.beginPath();  
16.     var val=0;  
17.     for(var i=0;i<4;i++){  
18.         ctx6.arc(350,70,60,val,val+Math.PI/4,false);  
19.         val+=Math.PI/2;  
20.     }  
21.     ctx6.closePath();  
22.     ctx6.fill();  
23.     ctx6.stroke();  
24. </script>  

3)绘制贝塞尔曲线

  bezierCurveTo(cx1,cy1,cx2,cy2,x,y)——绘制一段贝塞尔曲线到点（x,y）,控制点为(cx1,cy1)和(cx2,cy2)；

  quadraticCurveTo(cx,xy,x,y)——绘制一段二次贝塞尔曲线到点（x,y）,控制点为（cx,cy）；  

[html]  view plain copy

1. <canvas id="canvas" width="500" height="140">  
2.             Your browser doesn't support the <code>canvas</code> element  
3.         </canvas>  

[javascript]  view plain copy

1. <script>  
2.     var canvasElem = document.getElementById("canvas");  
3.     var ctx = canvasElem.getContext("2d");  
4.   
5.     var startPoint = [50, 100];  
6.     var endPoint = [400, 100];  
7.     var cp1 = [250, 50];  
8.     var cp2 = [350, 50];  
9.       
10.     canvasElem.onmousemove = function(e) {  
11.         if (e.shiftKey) {  
12.             cp1 = [e.clientX, e.clientY];  
13.         } else if (e.ctrlKey) {  
14.             cp2 = [e.clientX, e.clientY];  
15.         }  
16.         ctx.clearRect(0, 0, 500, 140);  
17.         draw();  
18.     }  
19.       
20.     draw();  
21.   
22.     function draw() {  
23.         ctx.lineWidth = 3;  
24.         ctx.strokeStyle = "black";                    
25.         ctx.beginPath();  
26.         ctx.moveTo(startPoint[0], startPoint[1]);  
27.         ctx.bezierCurveTo(cp1[0], cp1[1], cp2[0], cp2[1],   
28.             endPoint[0], endPoint[1]);  
29.         ctx.stroke();  
30.   
31.         ctx.lineWidth = 1;  
32.         ctx.strokeStyle = "red";              
33.         var points = [startPoint, endPoint, cp1, cp2];  
34.         for (var i = 0; i < points.length; i++) {  
35.             drawPoint(points[i]);      
36.         }  
37.         drawLine(startPoint, cp1);  
38.         drawLine(endPoint, cp2);  
39.     }  
40.   
41.     function drawPoint(point) {  
42.         ctx.beginPath();  
43.   
44.         ctx.strokeRect(point[0] -2, point[1] -2, 4, 4);  
45.     }  
46.       
47.     function drawLine(from, to) {  
48.         ctx.beginPath();  
49.         ctx.moveTo(from[0], from[1]);  
50.         ctx.lineTo(to[0], to[1]);  
51.         ctx.stroke();  
52.     }  
53. </script>  

[html]  view plain copy

1. <canvas id="canvas" width="500" height="140">  
2.     Your browser doesn't support the <code>canvas</code> element  
3. </canvas>  

[javascript]  view plain copy

1. <script>  
2.   //绘制二次贝塞尔曲线  
3.     var canvasElem = document.getElementById("canvas");  
4.     var ctx = canvasElem.getContext("2d");  
5.   
6.     var startPoint = [50, 100];  
7.     var endPoint = [400, 100];  
8.     var cp1 = [250, 50];  
9.       
10.     canvasElem.onmousemove = function(e) {  
11.         if (e.shiftKey) {  
12.             cp1 = [e.clientX, e.clientY];  
13.         }  
14.         ctx.clearRect(0, 0, 500, 140);  
15.         draw();  
16.     }  
17.       
18.     draw();  
19.   
20.     function draw() {  
21.         ctx.lineWidth = 3;  
22.         ctx.strokeStyle = "black";                    
23.         ctx.beginPath();  
24.         ctx.moveTo(startPoint[0], startPoint[1]);  
25.         ctx.quadraticCurveTo(cp1[0], cp1[1], endPoint[0], endPoint[1]);  
26.         ctx.stroke();  
27.   
28.         ctx.lineWidth = 1;  
29.         ctx.strokeStyle = "red";              
30.         var points = [startPoint, endPoint, cp1];  
31.         for (var i = 0; i < points.length; i++) {  
32.             drawPoint(points[i]);      
33.         }  
34.         drawLine(startPoint, cp1);  
35.         drawLine(endPoint, cp1);  
36.     }  
37.   
38.     function drawPoint(point) {  
39.         ctx.beginPath();  
40.   
41.         ctx.strokeRect(point[0] -2, point[1] -2, 4, 4);  
42.     }  
43.       
44.     function drawLine(from, to) {  
45.         ctx.beginPath();  
46.         ctx.moveTo(from[0], from[1]);  
47.         ctx.lineTo(to[0], to[1]);  
48.         ctx.stroke();  
49.     }  
50. </script>  

4）创建剪辑区域

   clip()——创建新的裁剪区域；  

[html]  view plain copy

1. <canvas id="canvas7" width="500" height="140">  
2.     您的浏览器不支持<code>canvas</code>!  
3. </canvas>  

[javascript]  view plain copy

1. <script>  
2.     var ctx7=document.getElementById("canvas7").getContext("2d");  
3.   
4.     ctx7.fillStyle="yellow";  
5.     ctx7.beginPath();  
6.     ctx7.rect(0,0,500,140);  
7.     ctx7.fill();  
8.   
9.     ctx7.beginPath();  
10.     ctx7.rect(100,20,300,100);  
11.     ctx7.clip();  
12.   
13.     ctx7.fillStyle="red";  
14.     ctx7.beginPath();  
15.     ctx7.rect(0,0,500,140);  
16.     ctx7.fill();  
17. </script>  

5）绘制文本：

  fillText(<text>,x,y,width)——在位置(x,y)上绘制并填充文本。宽度参数可选，用来设置文本宽度的上限；

  strokeText(<text>,x,y,width)——在位置(x,y)上绘制并描边文本。宽度参数可选，用来设置文本宽度的上限；

  font——设置绘制文本时使用的字体；

  textAlign——设置文本的对齐方式：start、end、left、right、center;

  textBaseline——设置文本的基线：top、hanging、middle、alphabetic、ideographic、bottom；

6)使用特效和转换：

  6.1)使用阴影：

      shadowBlur——设置阴影的模糊程度；

      shadowColor——设置阴影的颜色；

      shadowOffsetX——设置阴影的水平偏移量；

      shadowOffsetY——设置阴影的垂直偏移量；

[html]  view plain copy

1. <canvas id="canvas8" width="500" height="140">  
2.      您的浏览器不支持<code>canvas</code>!  
3.  </canvas>  

[javascript]  view plain copy

1. <script>  
2.     //给图形和文本应用阴影  
3.     var ctx8=document.getElementById("canvas8").getContext("2d");  
4.   
5.     ctx8.fillStyle="lightgrey";  
6.     ctx8.strokeStyle="black";  
7.     ctx8.lineWidth=3;  
8.   
9.     ctx8.shadowOffsetX=5;  
10.     ctx8.shadowOffsetY=5;  
11.     ctx8.shadowBlur=5;  
12.     ctx8.shadowColor="grey";  
13.   
14.     ctx8.beginPath();  
15.     ctx8.arc(420,70,50,0,Math.PI,true);  
16.     ctx8.stroke();  
17.   
18.     ctx8.beginPath();  
19.     ctx8.arc(420,80,40,0,Math.PI,false);  
20.     ctx8.fill();  
21.   
22.     ctx8.font="100px sans-serif";  
23.     ctx8.fillText("hello",50,100);  
24.     ctx8.strokeText("hello",50,100);  
25. </script>  

6.2）使用透明度：

    globalAlpha——给文本和图形设置透明度（从0到1）；

[html]  view plain copy

1. <canvas id="canvas9" width="300" height="120">  
2.     您的浏览器不支持<code>canvas</code>!  
3. </canvas>  

[javascript]  view plain copy

1. <script>  
2.     //使用globalAlpha属性，设置透明度  
3.     var ctx9=document.getElementById("canvas9").getContext("2d");  
4.   
5.     ctx9.fillStyle="lightgrey";  
6.     ctx9.strokeStyle="black";  
7.     ctx9.lineWidth=3;  
8.   
9.     ctx9.font="100px sans-serif";  
10.     ctx9.fillText("hello",10,100);  
11.     ctx9.strokeText("hello",10,100);  
12.   
13.     ctx9.fillStyle="red";  
14.     ctx9.globalAlpha=0.5;  
15.     ctx9.fillRect(10,10,240,100);  
16. </script>  

6.3）使用合成：

    globalCompositeOperation——与透明度属性结合使用，来控制图形和文本在画布上绘制的方式；

    globalCompositeOperation允许的值：

    =copy——将来源绘制于目标之上，忽略一切透明度设置；

    =source-atop——在两个图像都不透明处显示来源图像，

                    目标图像不透明但来源图像透明处显示目标图像，其它位置显示为透明；

    =source-in——来源图像和目标图像都不透明处显示来源图像。其它位置显示为透明；

    =source-out——来源图像不透明但目标图像透明处显示来源图像。其它位置显示为透明；

    =source-over——来源图像不透明处显示来源图像。其它位置显示目标图像；

    =destination-atop——与source-atop相同，但用目标图像替代来源图像，反之亦然；

    =destination-in——与source-in相同，但用目标图像替代来源图像，反之亦然；

    =destination-over——与source-over相同，但用目标图像替代来源图像，反之亦然；

    =destination-out——与source-out相同，但用目标图像替代来源图像，反之亦然；

    =lighter——显示来源图像与目标图像的总和，颜色值限制最高255（100%）；

    =xor——对来源图像和目标图像执行异或运算；

[html]  view plain copy

1. <canvas id="canvas10" width="300" height="120">  
2.     您的浏览器不支持<code>canvas</code>!  
3. </canvas>  
4. <label>Comosition Value:</label>  
5. <select id="list">  
6.     <option>copy</option>  
7.     <option>destination-atop</option>  
8.     <option>destination-in</option>  
9.     <option>destination-over</option>  
10.     <option>destination-out</option>  
11.     <option>lighter</option>  
12.     <option>source-atop</option>  
13.     <option>source-in</option>  
14.     <option>source-out</option>  
15.     <option>source-over</option>  
16.     <option>xor</option>  
17. </select>  

[javascript]  view plain copy

1. <script>  
2.     //使用globalCompositeOperation属性  
3.     var ctx10=document.getElementById("canvas10").getContext("2d");  
4.   
5.     ctx10.fillStyle="lightgrey";  
6.     ctx10.strokeStyle="black";  
7.     ctx10.lineWidth=3;  
8.   
9.     var compVal="copy";  
10.   
11.     document.getElementById("list").οnchange=function(e){  
12.         compVal= e.target.value;  
13.         draw();  
14.     }  
15.   
16.     draw();  
17.   
18.     function draw(){  
19.         ctx10.clearRect(0,0,300,120);  
20.         ctx10.globalAlpha=1.0;  
21.         ctx10.font="100px sans-serif";  
22.         ctx10.fillText("hello",10,100);  
23.         ctx10.strokeText("hello",10,100);  
24.   
25.         ctx10.globalCompositeOperation=compVal;  
26.   
27.         ctx10.fillStyle="red";  
28.         ctx10.globalAlpha=0.5;  
29.         ctx10.fillRect(100,10,150,100);  
30.     }  
31. </script>  

6.4）使用变换：

    scale(<xScale>,<yScale>)——沿X轴缩放画布xScale倍，沿Y轴yScale倍；

    rotate(<angle>)——使画布围绕点(0,0)顺时针旋转指定的弧度数；

    translate(<x>,<y>)——重映射画布坐标为沿X轴x,沿Y轴y；

    transform(a,b,c,d,e,f)——合并现有的变换和a-f值所指定的矩阵；

    setTansform(a,b,c,d,e,f)——用a-f值所指定的矩阵替换现有的变换；

[html]  view plain copy

1. <canvas id="canvas11" width="400" height="200">  
2.     您的浏览器不支持<code>canvas</code>!  
3. </canvas>  

[javascript]  view plain copy

1. <script>  
2.     //使用变换  
3.     var ctx11=document.getElementById("canvas11").getContext("2d");  
4.   
5.     ctx11.fillStyle="lightgrey";  
6.     ctx11.strokeStyle="black";  
7.     ctx11.lineWidth=3;  
8.   
9.     ctx11.clearRect(0,0,300,120);  
10.     ctx11.globalAlpha=1.0;  
11.     ctx11.font="100px sans-serif";  
12.     ctx11.fillText("hello",10,100);  
13.     ctx11.strokeText("hello",10,100);  
14.   
15.     ctx11.scale(1.3,1.3);  
16.     ctx11.translate(100,-50);  
17.     ctx11.rotate(0.5);  
18.   
19.     ctx11.fillStyle="red";  
20.     ctx11.globalAlpha=0.5;  
21.     ctx11.fillRect(100,10,150,100);  
22.     ctx11.strokeRect(0,0,300,200);  
23. </script>