html5 canvas 笔记一（基本用法与绘制图形）

<canvas> 元素

<canvas id="tutorial" width="150" height="150"></canvas>

1．<canvas> 标签只有两个属性—— width和height，默认宽度为300像素和高度为150像素．

２. </canvas> 标签不可省．

渲染上下文（The rendering context）

1 var canvas = document.getElementById('tutorial');
2 var ctx = canvas.getContext('2d');

检查支持性

1 var canvas = document.getElementById('tutorial');
2 
3 if (canvas.getContext){
4   var ctx = canvas.getContext('2d');
5   // drawing code here
6 } else {
7   // canvas-unsupported code here
8 }

一个模板骨架

 1 <html>
 2   <head>
 3     <title>Canvas tutorial</title>
 4     <script type="text/javascript">
 5       function draw(){
 6         var canvas = document.getElementById('tutorial');
 7         if (canvas.getContext){
 8           var ctx = canvas.getContext('2d');
 9         }
10       }
11     </script>
12     <style type="text/css">
13       canvas { border: 1px solid black; }
14     </style>
15   </head>
16   <body onload="draw();">
17     <canvas id="tutorial" width="150" height="150"></canvas>
18   </body>
19 </html>

绘制矩形

1 fillRect(x, y, width, height)    绘制一个填充的矩形
2 strokeRect(x, y, width, height)    绘制一个矩形的边框
3 clearRect(x, y, width, height)    清除指定矩形区域，让清除部分完全透明

绘制路径

图形的基本元素是路径，路径是通过不同颜色和宽度的线段或者曲线相连形成的不同形状打点的集合，需要以下步骤．

创建路径起点
使用画图命令画出路径
封闭路径
通过描边或者填充区域来渲染图形

所用函数：

beginPath()，新建路径
closePath()，闭合路径
stroke()，通过线条绘制图形轮廓
fill()，通过填充路径的内容区域生成实心的图形

绘制一个三角形

 1 function draw() {
 2   var canvas = document.getElementById('canvas');
 3   if (canvas.getContext){
 4     var ctx = canvas.getContext('2d');
 5 
 6     ctx.beginPath();
 7     ctx.moveTo(75,50);
 8     ctx.lineTo(100,75);
 9     ctx.lineTo(100,25);
10     ctx.fill();
11   }
12 }

注意：只需使用两次lineTo() 函数

常用画线函数：

moveTo(x, y)　　将笔触移动到指定的坐标x以及y上。
lineTo(x, y)　　绘制一条从当前位置到指定x以及y位置的直线。
rect(x, y, width, height)　　绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。
arc(x, y, radius, startAngle, endAngle, anticlockwise)

　　画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

arcTo(x1, y1, x2, y2, radius)　　根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。

贝塞尔（bezier）以及二次贝塞尔

quadraticCurveTo(cp1x, cp1y, x, y)　　绘制二次贝塞尔曲线，x,y为结束点，cp1x,cp1y为控制点。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)　　绘制三次贝塞尔曲线，x,y为结束点，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二。

如图：

实例：

二次贝塞尔曲线

 1 function draw() {
 2   var canvas = document.getElementById('canvas');
 3   if (canvas.getContext) {
 4     var ctx = canvas.getContext('2d');
 5 
 6     // Quadratric curves example
 7     ctx.beginPath();
 8     ctx.moveTo(75,25);
 9     ctx.quadraticCurveTo(25,25,25,62.5);
10     ctx.quadraticCurveTo(25,100,50,100);
11     ctx.quadraticCurveTo(50,120,30,125);
12     ctx.quadraticCurveTo(60,120,65,100);
13     ctx.quadraticCurveTo(125,100,125,62.5);
14     ctx.quadraticCurveTo(125,25,75,25);
15     ctx.stroke();
16   }
17 }

三次贝塞尔曲线

 1 function draw() {
 2   var canvas = document.getElementById('canvas');
 3   if (canvas.getContext){
 4     var ctx = canvas.getContext('2d');
 5 
 6     // Quadratric curves example
 7     ctx.beginPath();
 8     ctx.moveTo(75,40);
 9     ctx.bezierCurveTo(75,37,70,25,50,25);
10     ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
11     ctx.bezierCurveTo(20,80,40,102,75,120);
12     ctx.bezierCurveTo(110,102,130,80,130,62.5);
13     ctx.bezierCurveTo(130,62.5,130,25,100,25);
14     ctx.bezierCurveTo(85,25,75,37,75,40);
15     ctx.fill();
16   }
17 }

综合实例

 1 function draw() {
 2   var canvas = document.getElementById('canvas');
 3   if (canvas.getContext){
 4     var ctx = canvas.getContext('2d');
 5 
 6     roundedRect(ctx,12,12,150,150,15);
 7     roundedRect(ctx,19,19,150,150,9);
 8     roundedRect(ctx,53,53,49,33,10);
 9     roundedRect(ctx,53,119,49,16,6);
10     roundedRect(ctx,135,53,49,33,10);
11     roundedRect(ctx,135,119,25,49,10);
12 
13     ctx.beginPath();
14     ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
15     ctx.lineTo(31,37);
16     ctx.fill();
17 
18     for(var i=0;i<8;i++){
19       ctx.fillRect(51+i*16,35,4,4);
20     }
21 
22     for(i=0;i<6;i++){
23       ctx.fillRect(115,51+i*16,4,4);
24     }
25 
26     for(i=0;i<8;i++){
27       ctx.fillRect(51+i*16,99,4,4);
28     }
29 
30     ctx.beginPath();
31     ctx.moveTo(83,116);
32     ctx.lineTo(83,102);
33     ctx.bezierCurveTo(83,94,89,88,97,88);
34     ctx.bezierCurveTo(105,88,111,94,111,102);
35     ctx.lineTo(111,116);
36     ctx.lineTo(106.333,111.333);
37     ctx.lineTo(101.666,116);
38     ctx.lineTo(97,111.333);
39     ctx.lineTo(92.333,116);
40     ctx.lineTo(87.666,111.333);
41     ctx.lineTo(83,116);
42     ctx.fill();
43 
44     ctx.fillStyle = "white";
45     ctx.beginPath();
46     ctx.moveTo(91,96);
47     ctx.bezierCurveTo(88,96,87,99,87,101);
48     ctx.bezierCurveTo(87,103,88,106,91,106);
49     ctx.bezierCurveTo(94,106,95,103,95,101);
50     ctx.bezierCurveTo(95,99,94,96,91,96);
51     ctx.moveTo(103,96);
52     ctx.bezierCurveTo(100,96,99,99,99,101);
53     ctx.bezierCurveTo(99,103,100,106,103,106);
54     ctx.bezierCurveTo(106,106,107,103,107,101);
55     ctx.bezierCurveTo(107,99,106,96,103,96);
56     ctx.fill();
57 
58     ctx.fillStyle = "black";
59     ctx.beginPath();
60     ctx.arc(101,102,2,0,Math.PI*2,true);
61     ctx.fill();
62 
63     ctx.beginPath();
64     ctx.arc(89,102,2,0,Math.PI*2,true);
65     ctx.fill();
66   }
67 }
68 
69 // A utility function to draw a rectangle with rounded corners.
70 
71 function roundedRect(ctx,x,y,width,height,radius){
72   ctx.beginPath();
73   ctx.moveTo(x,y+radius);
74   ctx.lineTo(x,y+height-radius);
75   ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
76   ctx.lineTo(x+width-radius,y+height);
77   ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
78   ctx.lineTo(x+width,y+radius);
79   ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
80   ctx.lineTo(x+radius,y);
81   ctx.quadraticCurveTo(x,y,x,y+radius);
82   ctx.stroke();
83 }