最近项目用了挺常用到 canvas 的，在这里做个记录，主要是为了备忘，省得老是查。
ctx.drawImage() —— 绘制图片
img, ( cutX, cutY, cutW, cutH ), putX, putY, ( W, H )
img 参数接受一个图像，可以是img标签，video标签或者另一个canvas。
ctx.fillText() —— 绘制文字
text, x, y, ( maxWidth )
将 text 字符串绘制到画布上，加上 maxWidth 参数会根据数值伸缩字符。
绘制文字前可以设置各种样式，比如 ctx.fillStyle='#FFF' ， ctx.font = '24px' ， ctx.textAlign 等。
ctx.textAlign —— 文字对齐
start | end | left | right | center
文字绘制以传参数的坐标点为基准，来对准文字的位置，如 center 则会将绘制文字的中点放在传参数的坐标上。（展示未区分出 start \ left 和 right \ end 的区别）
另外还有一种方法可以达到文字居中的效果，我将它用在单行居中多行左对齐的情况，核心方法：ctx.measureText( text ) ，该方法返回 text 的长度。
var lineWidth = 0, // 设置默认值，当前行宽
lineNum = 1, // 当前绘制第几行
initHeight = 0, // 当前行与顶部距离
lastSubStrIndex = 0; // 当前计算字符的序号
for (var i=0, len=text.length; i<len; i++) {
lineWidth += ctx.measureText(text[i]).width; // 计算逐个字叠加的宽度
if (lineWidth > 72*unit) { // 直到最大限制
if (lineNum == 2) { // 最多显示两行，最后显示省略号
text = text.substring(lastSubStrIndex, i-1) + ' ...'
ctx.fillText(text, X, Y+(initHeight*lineNum+35));//绘制截取部分
break;
}
// 填充当前行的内容
ctx.fillText(title.substring(lastSubStrIndex, i) , X, Y+(initHeight*lineNum+35));//绘制截取部分
initHeight += 26;
lineWidth = ctx.measureText(text[i]).width;
lastSubStrIndex = i;
lineNum += 1;
}
if(i==text.length-1){//绘制剩余部分
var pushCenter = 0;
if (lineNum == 1) {// 只有一行则居中文字
pushCenter = (72*unit-lineWidth)/2;
initHeight = 26;
}
ctx.fillText(title.substring(lastSubStrIndex,i+1), 14*unit + pushCenter, 40*unit+(initHeight*lineNum+35));
}
}
ctx.arc() —— 绘制圆形（弧线）
X, Y, R, start°, end°, ( 顺时针-false | 逆时针-true )
绘制好弧形路径之后，使用 stroke() 或 fill() 获得线段或填充图形。
使用这个方法可以将方形图片裁剪成圆形绘制到画布上
ctx.arc(X, Y, R, 0, Math.PI * 2);
ctx.clip(); // 剪切路径，这里可以理解为选区，后面的绘制只会在选区内
ctx.drawImage(img, 0, 0, width, height, 0, 0, 2*R, 2*R);
