記錄一些自己寫canvas demo后理解的點
// 這是前提
let ctx = canvas.getContext('2d');
0. 我繪制了一個鐘表
1. ctx.save() 都能保存什么內(nèi)容跃巡?
路徑顏色寬度等等屬性肯定是可以保存的随常。
變換上下文也能被保存医窿,代碼示例:http://jsrun.net/zY6Kp/edit
2. ctx.closePath() 是用來閉合路徑的,而不是關(guān)閉 ctx.beginpath()
3. 擴展 ctx
2d ctx是CanvasRenderingContext2D的實例酸钦,
所以可以通過下面的方式擴展ctx
CanvasRenderingContext2D.prototype.test = function(){}
// 擴展后可以這樣調(diào)用
ctx.test();
我自己擴展了一個繪制圓角矩形的方法:http://jsrun.net/aY6Kp/edit
4. 神奇的貝塞爾曲線
ctx 提供了兩個貝塞爾曲線方法:
ctx.bezierCurveTo(c1x, c1y, c2x, c2y, x, y) // 兩個控制點
ctx.quadraticCurveTo(c1x, c1y, x, y) // 一個控制點