参考：使用canvas来绘制图形 - Web API 接口参考 | MDN

介绍

<canvas>元素用来绘制2D图形（可以通过改变位置实现伪3D效果，WebGL 使用了基于OpenGL ES的3D上下文）。

Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px，可以修改）。

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

canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。

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

图形绘制

通常来说网格（canvas grid）中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。

<canvas>只支持两种形式的图形绘制：矩形和路径（一系列点连成的线段）。

1、绘制矩形

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

rect(x, y, width, height)
绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。当该方法执行的时候，moveTo()方法自动设置坐标参数（0,0）。也就是说，当前笔触自动重置回默认坐标。

2、绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。

（1）首先，你需要创建路径起始点。

beginPath() 本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。

当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（），无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。

（2）然后你使用画图命令去画出路径。

（3）之后你把路径封闭。

closePath()不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。

（4）一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

stroke()绘制图形轮廓或fill()填充路径内容区域。

当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

3、绘制一个三角形

function draw() {var canvas = document.getElementById('canvas');if (canvas.getContext) {var ctx = canvas.getContext('2d');ctx.beginPath();ctx.moveTo(75, 50); //启示位置ctx.lineTo(100, 75); //画线ctx.lineTo(100, 25); //画线ctx.fill(); //填充并闭合路径（默认填充黑色）}
}

4、moveTo() 移动笔触

moveTo(x, y)
将笔触移动到指定的坐标x以及y上。也能够使用moveTo()绘制一些不连续的路径。

function draw() {var canvas = document.getElementById('canvas');if (canvas.getContext){var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 外圆ctx.moveTo(110, 75); //调整起止位置ctx.arc(75, 75, 35, 0, Math.PI, false);   // 口(顺时针)ctx.moveTo(65, 65); //调整起止位置ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左眼ctx.moveTo(95, 65); //调整起止位置ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右眼ctx.stroke();}
}

 5、画线 lineTo(x,y)

绘制一条从当前位置到指定x以及y位置的直线。

之前路径的结束点就是接下来的开始点，开始点也可以通过moveTo()函数改变。

6、圆弧 arc()

绘制圆弧或者圆，我们使用arc()方法。

arc(x, y, radius, startAngle, endAngle, anticlockwise)

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

 arcTo(x1, y1, x2, y2, radius)

根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:

弧度=(Math.PI/180)*角度。

7、二次贝塞尔曲线及三次贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y)

绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

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

二次贝塞尔曲线有一个开始点（蓝色）、一个结束点（蓝色）以及一个控制点（红色），而三次贝塞尔曲线有两个控制点。

Path2D对象

Path2D对象已可以在较新版本的浏览器中使用，用来缓存或记录绘画命令，这样你将能快速地回顾路径。

Path2D()会返回一个新初始化的Path2D对象（可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量）。

new Path2D();     // 空的Path对象
new Path2D(path); // 克隆Path对象
new Path2D(d);    // 从SVG建立Path对象

所有的路径方法比如moveTo, rect, arc或quadraticCurveTo等，如我们前面见过的，都可以在Path2D中使用。

function draw() {var canvas = document.getElementById('canvas');if (canvas.getContext){var ctx = canvas.getContext('2d');var rectangle = new Path2D();rectangle.rect(10, 10, 50, 50);var circle = new Path2D();circle.moveTo(125, 35);circle.arc(100, 35, 25, 0, 2 * Math.PI);ctx.stroke(rectangle);ctx.fill(circle);}
}