canvas複習總結(二)

guoliangli發表於2018-02-10
Canvas

繪製文字

  • 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)

相關文章