canvas 筆記

記錄一些自己寫canvas demo后理解的點

// 這是前提
let ctx = canvas.getContext('2d');
0. 我繪制了一個鐘表

點擊查看 http://jsrun.net/vY6Kp

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) // 一個控制點
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容