使用多個畫布比使用多個畫布慢？

如果我要使用fps，使用一個較大的畫布並不斷重繪或使用一堆小畫布並重繪較少的速度會更快，但使用css3來進行動畫效果？使用多個畫布比使用多個畫布慢？

<canvas id="1" width="60px" height="60px"></canvas> 
<canvas id="2" width="60px" height="60px"></canvas> 
<canvas id="3" width="60px" height="60px"></canvas> 
<canvas id="4" width="60px" height="60px"></canvas>

來源

2012-08-11 nuway

我從來沒有真正看過多個畫布，這可能意味着最好的方法是一個畫布。 – Blender 2012-08-11 05:20:48

你想達到什麼目的？一個遊戲？ – 2012-08-11 05:34:33

@Blender：想一想點擊冒險。如果背景沒有任何活動對象，並且活動的前景對象不與背景交互，則使用多個圖層幾乎總是一個更好的主意，以避免重新呈現未更改的部分。相反，您可以簡單地清除最上面的圖層並添加小閃爍，而無需重新繪製角色，背景，廣告資源...... – Zeta 2012-08-11 10:52:36

從理論上講，一個帆布實際上是更快的，假設你是一個算法，僅重劃什麼需要重繪程序和拉法發生的一切在一次*。重繪方法可能是瀏覽器可以完成的最苛刻的操作之一;越少越好。

但是，完成這樣的系統所需的代碼量可能不值得最後的努力。爲了可維護性和擴展性的目的，我會堅持使用多個畫布。

下面是一些其他的優化技巧我學到：

清除整個畫布似乎沒有采取任何的時間比清除特定的區域，實際上可以快於通過所有的對象循環並單獨清除它們。
setTimeout最適合看到每一幀很重要的動畫。可以在性能較差的機器上跳過幀。
在嘗試繪製元素之前檢查元素是否在範圍內可以節省CPU週期，即使畫布API無論如何都會這樣做。

*要調用一個重繪，您可以在上下文已經改變之後，一個帆布display設置爲none，然後回到block。

來源

2012-08-11 13:42:25

多畫布帶來更好的性能，因爲其只是一個畫布，這將是不景氣瀏覽器上相同的畫布上反覆繪製比有許多油畫和做畫同步的工作。假設你必須在同一個畫布上重繪，每次繪製新東西時都必須更新曲面。很明顯，如果你有多個畫布，情況就不會如此，因爲無論其他畫布如何，都可以隨時繪製。

CANVAS PERFORMANCE

來源

2012-08-11 10:46:36 defau1t

使用多個畫布比使用多個畫布慢？

回答

相關問題