最近項目用了挺常用到 canvas 的，在這里做個記錄，主要是為了備忘，省得老是查。

ctx.drawImage() —— 繪制圖片

img, ( cutX, cutY, cutW, cutH ), putX, putY, ( W, H )

img 參數(shù)接受一個圖像，可以是img標(biāo)簽，video標(biāo)簽或者另一個canvas。

ctx.fillText() —— 繪制文字

text, x, y, ( maxWidth )

將 text 字符串繪制到畫布上，加上 maxWidth 參數(shù)會根據(jù)數(shù)值伸縮字符。
繪制文字前可以設(shè)置各種樣式，比如 ctx.fillStyle='#FFF' ， ctx.font = '24px' ， ctx.textAlign 等。

ctx.textAlign —— 文字對齊

start | end | left | right | center

文字繪制以傳參數(shù)的坐標(biāo)點(diǎn)為基準(zhǔn)，來對準(zhǔn)文字的位置，如 center 則會將繪制文字的中點(diǎn)放在傳參數(shù)的坐標(biāo)上。（展示未區(qū)分出 start \ left 和 right \ end 的區(qū)別）


另外還有一種方法可以達(dá)到文字居中的效果，我將它用在單行居中多行左對齊的情況，核心方法：ctx.measureText( text ) ，該方法返回 text 的長度。

var lineWidth = 0, // 設(shè)置默認(rèn)值，當(dāng)前行寬
    lineNum = 1, // 當(dāng)前繪制第幾行
    initHeight = 0, // 當(dāng)前行與頂部距離
    lastSubStrIndex = 0; // 當(dāng)前計算字符的序號
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;
    }
    // 填充當(dāng)前行的內(nèi)容
    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(); // 剪切路徑，這里可以理解為選區(qū)，后面的繪制只會在選區(qū)內(nèi)
ctx.drawImage(img, 0, 0, width, height, 0, 0, 2*R, 2*R);