文字
- strokeText(text, x, y)
- fillText(text. x, y)
- font
- textAlign
- textBaseline
圖片
- 插入圖片 drawImage(img, x, y)
- 插入圖片設(shè)置大小 drawImage(img, x, y, width, height)
- 插入圖片的一部分到畫布 drawIamge(img, sx, sy, swidth, sheight, x, y, width, height)
canvas 陰影
- shadowColor
- shadowBlur
- shadowOffsetX
- shadowOffsetY
漸變
- 線性漸變 createLinearGradient(x1, y1, x2, y2)
addColorStop()
Canvas基礎(chǔ)
- 劃線
- 矩形
- 填充
- 描邊
- 文字
- 弧
Canvas進(jìn)階
陰影
漸變
線性漸變
徑向漸變
- createRadiaGradient(x1, y1, r1, x2, y2, r2)
- addColorStop()
把背景圖片作為填充
- createPattern(imgDom, repeate)
- 第二個參數(shù) repeate/ repeat-x / repeat-y / no-repeat
變換
縮放
- sacle(x, y)
位移
- translate(x, y)
旋轉(zhuǎn)
- rotate(angle)
環(huán)境的保存和恢復(fù)
- save()
- restore()
設(shè)置透明
- globalAlpha = number 設(shè)置不透明度
- 全局設(shè)置是對整個畫布（繪圖環(huán)境） 進(jìn)行設(shè)置
限定繪圖區(qū)域
- clip()
輸出base64編碼
- canvas.toDataURL(type, encoder)
- type為mime類型 image/jpeg image/gif image/png image/webp
畫布渲染畫布
把一個畫布以圖片的形式用 drawImage() 插入到另一個畫布
這是一種canvas的優(yōu)化手段
設(shè)置線條
- lineCap 屬性 設(shè)置線條兩端的形狀 butt/round/square
- lineJoin 屬性 設(shè)置線條夾角 miter/bevel/round
- miterLimit 屬性 設(shè)置夾角斜角的最大長度 一般默認(rèn) 10
