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:默認(rèn)皂甘，向線條的每個末端添加平直的邊緣嗡官。
- oround 、、
- square： 向線條的每個末端添加正方形線帽诱桂。
-
lineJoin 屬性 設(shè)置線條夾角
- miter: 默認(rèn).創(chuàng)建尖角
- bevel:創(chuàng)建斜角.
- round: 創(chuàng)建圓角.
miterLimit 屬性 設(shè)置夾角斜角的最大長度 一般默認(rèn) 10
