Canvas 進階

變換--位移

? ? translate(x, y)

變換-旋轉

? ? rotate(deg)

變換-縮放

? ? scale(scalex, scaley)

陰影

? ? shadowOffsetX

? ? shadowOffsetY

? ? shasowColor

? ? shadowBlur

透明度

? ? globalAlpha 值 0~1小數

繪圖環境的恢復

? ? save()

? ? restore()

漸變

? ? createLinearGradient(x1, y1, x2, y2)

? ? createRadialGradient(x1, y1, r1, x2, x2, r2 )

? ? addColorStop(位置， 顏色)

填充圖片

? ? createPattern(img, "repeat/no-repeat/repeat-x/repeat-y")

輸出base64 編碼

? ? canvas.toDateURL("mime類型", "0~1") image/jpeg ? ? ? ? ?image/gif iamge/png

線條樣式

? ? lineCap butt/square/round

? ? lineJoin miter/bevel/round

第三方Canvas 庫 Konva

? ? 常見的第三方庫

? ? ? ? konva.js

? ? ? ? tree.js (3d引擎)

? ? ? ? egret

? ? ? ? echarts 圖標插件