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>
最后，我们还可以通过canvasAPI实现阴影效果，渐变效果，模式等。
svg vs canvas
svg（Scalable Vector Graphics） 是一种使用XML描述2D图形的语言。它是基于XML的，意味着其中的dom元素可以添加javascript事件。 并且SVG属性发生变化时，浏览器自动重现图片，不失真。
canvas时通过js绘制2D图形，逐像素进行渲染。使用canvas绘制的图片一旦绘制完成后，便不再被关注。如果发生变化，需要重新绘制。