HTML5 canvas

　　canvas主要用于绘制简单的2D图形，具备基本绘图能力的2D上下文。webGL用于绘制3D图形，但支持不够好。下面我们主要来说明绘图的步骤，以及有哪些绘图API。

绘图步骤

创建画布，指定绘图区域，必须指定宽高，否则画布不显示。

1 <!-- 创建一个长200，宽200的画布 -->
2 <canvas id="drawing" width="200" height="200"></canvas>

　　2. 获取上下文，调用getContext方法进行获取。

1 var drawing＝ document.getElementById('drawing');
2 if (drawing.getContext) { // 检测浏览器是否支持canvas
3     var context = drawing.getContext('2d');
4 }

　　3. 在上下文中进行图形绘制，绘制相关api将在后面详细进行描述。

　　4. 最后，可以将绘制的图片导出。使用toDataURL()方法。

绘图API

　　1. 基本绘图操作

填充：使用fillStyle属性设置样式。其值可以是颜色，渐变对象，模式对象。
描边：使用strokeStyle属性设置样式。

　　2. 绘制矩形

　　fillRect(x, y, w, h); 　　使用fillStyle设置的样式。

　　strokeRect(x, y, w, h); 　　使用strokeStyle设置的样式。

　　其中，x，y为矩形的起点，w为矩形的宽，h为矩形的高。

　　并且描边的边线样式，可以通过设置lineWidth，lineCap，lineJoin进行设置。

 1 if (canvas1.getContext) {
 2     // 获取2d上下文
 3     context = canvas1.getContext('2d');
 4 
 5     // 以（10， 10）点为起点，绘制长宽为50的红色矩形框
 6     context.fillStyle = '#ff0000';
 7     context.fillRect(10, 10, 50, 50);
 8     // 以（30， 30）点为起点，绘制长宽为50的半透明蓝色矩形框
 9     context.fillStyle = 'rgba(0, 0, 255, 0.5)';
10     context.fillRect(30, 30, 50, 50);
11 }

　　3. 绘制路径

　　在绘图之前需要调用beginPath()方法，开始绘制路径。在绘图之后调用closePath()方法，结束路径绘制。

　　绘制路径API

　　1. arc(x, y, radius, startAngle, endAngle, counterclockwise); 以(x, y)为圆心绘制圆弧

　　2. arcTo(x1, y1, x2, y2, radius);　绘制连接(x1, y1),(x2, y2)且半径为radius的圆弧

　　3. lineTo(x, y);　　从当前点开始绘制到(x, y)

　　4. moveTo(x, y); 　　移动到（x, y）点，不绘制图像

　　5. rect(x, y, w, h);　　绘制矩形路径　

　　最后使用fill()或 stroke()进行填充或描边，或者使用clip()对路径进行裁剪。

　　4. 绘制文本

　　strokeText(text, x, y);

　　fillText(text, x, y);

　　我们可以通过设置font，textAlign，textBaseline属性，设置文本大小和对齐方式。

　　钟表代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>canvas clock</title>
 7 </head>
 8 
 9 <body>
10     <canvas id="clock" width="200px" height="200px" style="border: 1px solid gray"></canvas>
11 </body>
12 <script>
13 var canvas = document.getElementById('clock');
14 
15 if (canvas.getContext) {
16     var context = canvas.getContext('2d');
17 
18     context.beginPath();
19     // 外圈
20     context.arc(100, 100, 98, 0, Math.PI * 2, false);
21 
22     // 内圈
23     context.moveTo(194, 100);
24     context.arc(100, 100, 94, 0, Math.PI * 2, false);
25 
26     // 绘制分针
27     context.moveTo(100, 100);
28     context.lineTo(100, 10);
29 
30     // 绘制时针
31     context.moveTo(100, 100);
32     context.lineTo(30, 100);
33     // context.endPath();
34 
35     context.strokeStyle = '#ff0000';
36     context.stroke();
37 
38     // 绘制文本
39     context.font = 'bold 16px Arial';
40     context.textAlign = 'center';
41     context.textBaseline = 'top';
42 
43     context.fillText('12', 100, 8);
44 
45 }
46 </script>
47 
48 </html>

View Code

　　最后，我们还可以通过canvasAPI实现阴影效果，渐变效果，模式等。

svg vs canvas

　　svg（Scalable Vector Graphics）是一种使用XML描述2D图形的语言。它是基于XML的，意味着其中的dom元素可以添加javascript事件。并且SVG属性发生变化时，浏览器自动重现图片，不失真。

　　canvas时通过js绘制2D图形，逐像素进行渲染。使用canvas绘制的图片一旦绘制完成后，便不再被关注。如果发生变化，需要重新绘制。