canvas高級
陰影
shadowColor 屬性
shadowBlur 屬性
shadowOffsetX 屬性
shadowOffsetY 屬性
漸變
線性漸變
createLinearGradient(x0, y0, x1, y1);
grd.addColorStop(number, color)
徑向漸變
createRadialGradient(x0,y0,r0, x1, y1, r1)
grd,addColorStop(number,color)
背景填充
createPattern(img, repeate)
變換 - 縮放
sacle(w, h)
變換-位移
translate(w, h)
變化-旋轉(zhuǎn)
rotate(deg)
環(huán)境的保存和釋放
save()
restore()
設(shè)置不透明度
globalAlpha 屬性 設(shè)置不透明度 對整體(繪圖環(huán)境)進行設(shè)置 0~1小數(shù)
裁剪畫布(繪圖環(huán)境)
clip() 沿著路徑包圍的部分裁切十拣。 對繪圖環(huán)境進行裁切
畫布保存為Base63編碼
canvas.toDataURL(type, 壓縮比) 類型是圖片的mime類型
畫布渲染畫布
drawIamge(canvas, 0, 0)
圖像在隱藏的canvas 上繪制
繪制完成后 把隱藏canvas 渲染到 顯示的canvas上
線條樣式
lineCap 屬性 兩端樣式 butt/round/square
lineJoin 屬性 兩線相交樣式 miter/round/bevel
miterLimit 屬性 設(shè)置尖角的長度
貝塞爾曲線(了解)
使用切線畫弧(了解)
arcTo(x1, y1, x2, y2, r)
判斷是否在路徑上
isPositionPath(x, y)
canvas庫 -- Konva
常見的canvas庫
Konva
echarts
白鷺時代