繪製文字
-
fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文字，繪製的最大寬度是可選的. -
strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置繪製文字邊框，繪製的最大寬度是可選的.
文字樣式
- font
- textAlign
- textBaseLine
- direction
文字測量
measureText()
將返回一個 TextMetrics物件的寬度、所在畫素，這些體現文字特性的屬性。
繪製圖片
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
canvas可以用img，video，其他canvas獲取圖片源。注意，如果圖片是跨域的，需要跨域圖片伺服器在設定允許跨域頭，否則canvas畫布將被汙染，無法獲得圖片的data。
狀態的儲存和恢復
canvas使用堆疊儲存狀態，包括：
- 當前應用的變形
- strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值
- 當前的裁切路徑
變形
-
translate(x, y)
-
rotate 順時針方向
-
scale(x, y)
-
transform(m11, m12, m21, m22, dx, dy)
m11 m21 dx m12 m22 dy 0 0 1 複製程式碼m11：水平方向的縮放
m12：水平方向的偏移
m21：豎直方向的偏移
m22：豎直方向的縮放
dx：水平方向的移動
dy：豎直方向的移動
-
setTransform(m11, m12, m21, m22, dx, dy) 取消了當前變形,然後設定為指定的變形,一步完成。
-
resetTransform() == setTransform(1, 0, 0, 1, 0, 0)
組合
globalCompositeOperation一共十二種模式，設定了在畫新圖形時採用的遮蓋策略。預設值source-over
裁剪
clip() 用來隱藏不需要顯示的部分，是canvas狀態的一部分，可以被stroe儲存。
畫素操作
ImageData物件包含以下只讀屬性
- width
- height
- data (Uint8ClampedArray)8位無符號整型固定陣列 包含高度 × 寬度 × 4 bytes的資料
相關操作
- createImageData(width,height) 去建立一個新的，空白的ImageData物件，預設透明黑
- getImageData(left, top, width, height)
- putImageData(myImageData, dx, dy) 寫入畫素資料
抗鋸齒
imageSmoothingEnabled 屬性
儲存圖片
- toDataURL(type, quality)
- toBlob(callback, type, encoderOptions)