優化

canvas廣泛運用在網頁的2D繪圖、動畫、遊戲上，但效能自始至終是一個重要的問題，以下有幾點注意事項，可以提升canvas的效能:

• 利用視窗外的畫布，重複渲染圖像到主畫布
  如果有一些需要重複繪製的圖像，可以在視窗外的畫布畫好，再重複渲染至主畫布，就不必每一次都重新繪製

• 避免浮點數座標
  前面某一天有提到，浮點數的座標會造成鋸齒化的情況，為了避免此情況會希望大家多用整數座標，可以使用Math.floor()

• drawImage時不要縮放圖片

• 使用多層畫布畫多層場景
  例如遊戲，可以一層<canvas>背景，一層<canvas>ＵＩ，這樣背景那層就不用每一次都重新繪製

• 用CSS設置大的背景圖
  盡量避免在<canvas>上繪製大圖，可以使用css

• 用CSS transform縮放畫布
  因為css transform是使用GPU，效能較快

• 關閉透明度
  在不需要使用透明度時，可以把透明度關掉，有關透明度的屬性shadowBlur也盡量避免使用

• requestAnimationFrame()優於 setInterval()

• 減少呼叫Canvas Api
  例如，做粒子效果時，可以直接做方形的，因為粒子大小，圓形跟方形看起來差不多，且圓形在canvas上的繪製步驟有三步驟，而方形只要fillRect()，且粒子一多，效能就有顯著差異

～如有疑問或是錯誤，歡迎不吝指教～

參考來源：
[1]https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
[2]https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/383877/