一、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.绘制区域

3.绘制路径

4.缩放变形

5.绘制图片

6.其他常用方法

更多：

HTMLCanvasElement 整理 

Canvas 实现圆圈进度展示/进度动画 

canvas应用——将方形图片处理为圆形