CanvasAPI参考文档推荐：
一、CanvasRenderingContext2D 属性
canvas : 当前元素对象
globalAlpha: 全局透明度，范围是0到1，范围以外的值会被忽略
globalCompositeOperation: 可以用来设置Canvas图形的混合模式。可以衍生很多其他效果，以及改变绘制图形的上下层叠关系。
fillStyle :
color
使用纯色填充，支持RGB，HSL，RGBA，HSLA以及HEX色值。
gradient
使用渐变填充，可以是线性渐变或者径向渐变。
pattern
使用纹理填充。由于图片也能作为纹理，因此fillStyle也能填充普通的位图
文字设置：
font: value就是字号字体值，其规则和CSS的font很类似，除了一些很微小的细节差异，其他几乎没什么区别
textAlign：文本水平对齐方式，和CSS的text-align属性值类似，支持left，right，centerstart，end这些值
textBaseline：指定文本对齐的基线，
其中value支持如下几个关键字：
top
设定的垂直y坐标作为文本em区域（em区域可以看成中文字符占据的区域）的顶部。
hanging
hanging主要在藏文和其他印度文字中使用，我们了解即可。
middle
设定的垂直y坐标作为文本em区域的垂直中心位置。
alphabetic
默认值。表示的是正常文本的基线，可以看成是字母x的下边缘。也就是设定的垂直y坐标就是字母x的下边缘。
ideographic
ideographic主要在汉语、日语和韩语中使用。字面直译是表意基线。含义为：如果字符的主体突出在字母基线之下，则这是字符主体的底部。例如汉字“中”比字母x位置更低，因此，底部是汉字主体的底部。
bottom
设定的垂直y坐标作为文本em区域的底部。
线段相关：
lineCap: 表示线条端点的样式
butt
默认值，线的端点就像是个断头台，例如一条横线，终点x坐标是100，则这条线的最右侧边缘就是100这个位置，没有超出。
round
线的端点多出一个圆弧。
square
线的端点多出一个方框，框框的宽度和线一样宽，高度是线厚度的一半。
lineDashOffset:value 表示虚线起始绘制的偏移距离，为浮点型，默认值是0.0。
lineJoin: 表示线条转角的样式，支持：miter，round，bevel
lineWidth:value 表示线的宽度。数值类型，默认值是1.0。如果是负数，0，NaN，或者Infinity都会忽略。
miterLimit：value表示多大范围内转角表现为miter的宽度。数值类型，默认值是10.0。如果是负数，0，NaN，或者Infinity都会忽略。
strokeStyle：可以是路径的描边，也可以是是形状的描边，也可以是文字的描边。描边的样式也不仅限于颜色。
color
描边设置为颜色。
gradient
描边设置为渐变。
pattern
描边设置为图案。
阴影设置：
shadowBlur：可以用来指定阴影的模糊程度。默认值是0，表示不模糊。
shadowColor：可以用来指定阴影的颜色。默认值是透明黑，也就是看不到颜色，因此，如果我们想要使用阴影效果，shadowColor是必须要指定的。
shadowOffsetX：表示阴影的水平偏移大小。
shadowOffsetY：表示阴影的垂直偏移大小。
二、CanvasRenderingContext2D 方法
1.绘制文字
fileText()
用来填充文字，是Canvas绘制文本的主力方法。
context.fillText(text, x, y [, maxWidth]);
参数
各个参数含义和作用如下：
textString
用来填充的文本信息。
xNumber
填充文本的起点横坐标。
yNumber
填充文本的起点纵坐标。
maxWidth（可选）Number ,指定最大宽度，每个文本宽度进行适合，而非换行
strokeText()
实现文本描边效果。此描边为居中描边。
context.strokeText(text, x, y [, maxWidth]);
参数同上
measureText()
可以用来测量文本的一些数据，返回 TextMetrics.
context.measureText(text)
返回值：TextMetrics，含有文本的宽度
TextMetrics.width
只读。表示当前文本占据的CSS像素宽度。
2.绘制区域，绘制路径
stroke();
context.stroke();
context.stroke(path);
参数
pathObject
指Path2D对象。IE浏览器不支持。
属性关联：lineWidth,strokeStyle
fill();
context.fill();
context.fill(fillRule);
context.fill(path, fillRule);
参数
各个参数含义和作用如下：
fillRuleString
填充规则。用来确定一个点实在路径内还是路径外。可选值包括：
nonzero：非零规则，此乃默认规则。
evenodd：奇偶规则。
pathObject
指Path2D对象。
属性关联：fillStyle
绘制路径：
lineTo（） 、moveTo() 、arcTo() 、quadraticCurveTo()、 bezierCurveTo() 、beginPath()、 closePath()
context.beginPath(); context.moveTo(50, 20); context.lineTo(200, 100); context.stroke();
context.beginPath(); context.moveTo(50, 50); context.bezierCurveTo(100, 100, 200, 40, 250, 100); context.stroke();
// 开始绘制 context.beginPath(); context.moveTo(50, 50); context.quadraticCurveTo(100, 100, 250, 100); context.stroke();
context.arcTo(x1, y1, x2, y2, radius);
context.quadraticCurveTo(cpx, cpy, x, y);
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
strokeRect()
context.strokeRect(x, y, width, height);
rect() 功能同 strokeRect()
arc()
context.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
参数
各个参数含义和作用如下：
xNumber
圆弧对应的圆心横坐标。
yNumber
圆弧对应的圆心纵坐标。
radiusNumber
圆弧的半径大小。
startAngleNumber
圆弧开始的角度，单位是弧度。
endAngleNumber
圆弧结束的角度，单位是弧度。
anticlockwise（可选）Boolean
弧度的开始到结束的绘制是按照顺时针来算，还是按时逆时针来算。如何设置为true，则表示按照逆时针方向从startAngle绘制到endAngle。