最佳化canvas
<canvas>
在網頁 2D 繪圖上被大量運用於遊戲和複雜視覺化效果上。隨著繪圖複雜度越來越高,效能問題也會逐一浮現,所以最後我們在這邊列出一些最佳化畫布的方法,避免一些效能問題:
- 在畫面之外的畫布上先行渲染相似或重複的物件
- 批次性執行繪圖,例如一次畫數個線條而非分開一次一次畫
- 使用整數位座標值,盡量避免小數點值
- 避免不必要的畫布狀態改變
- 只渲染不同處,不要全部重新渲染
- 對於複雜需求可以利用多個畫布分層構成
- 盡量不要用 shadowBlur 屬性
- 使用
window.requestAnimationFrame()
- 用JSPerf測試效能
io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/content/files/en-us/web/guide/html/canvas_tutorial/basic_animations/index.md)