canvas 常规操作

最近项目用了挺常用到 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 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);