分層多個畫布的效率如何？

Question

我一直在想，對畫布進行分層是否實際上是一種提高游戲性能的有效方法。

例如，2或3個相同大小的畫布彼此重疊。

很難從中找到測試結果，但是根據我對繪圖的理解，如果更改了其他圖層之上的圖層，則瀏覽器無論如何都必須將區域重新繪制為像素。 此外，如果所有畫布都必須同時移動，那么您需要乘以需要計算的像素數量。

我想知道如果上方的元素發生變化，瀏覽器如何處理其他下方的繪畫畫布。

是否由於不必再次調用canvas方法本身而效率更高？ 他們還不需要畫畫嗎？

Answer 1

我的經驗是軼事，所以您真的需要測試您的想法，看看它是否更好。

通過創建屏幕外（內存中）畫布並將游戲的不同圖層與這些圖層合成到一個用於查看游戲的可見畫布中，您可能會獲得最佳性能。

Answer 2

我不確定這是否會很有幫助，但是我還是會告訴您。 假設您有2張畫布，並且您希望游戲在特定條件下在它們之間切換。 這可以通過使用一些HTML，CSS和JavaScript來實現。

 <canvas id="canvas1" width=500 height=500 style="border: 2px solid #00F"></canvas> <canvas id="canvas2" width=500 height=500 style="border: 2px solid #F00"></canvas> <button id="switcher" onclick="switchcanvas=true">Click here to switch the canvas!</button> <style> #canvas1 { left: 0%; right: 0%; display: block; } #canvas2 { left: 0%; right: 0%; display: none; } </style> <script> var switchcanvas = false; var canvas1 = document.getElementById("canvas1"); var canvas2 = document.getElementById("canvas2"); function update() { if (switchcanvas) { if (canvas1.style.display === "block") { canvas1.style.display = "none"; canvas2.style.display = "block"; switchcanvas = false; //if you set this to true or remove it the canvases will keep switching. } else { canvas1.style.display = "block"; canvas2.style.display = "none"; switchcanvas = false; } } } update(); setInterval(update, 1); //function update will update every ms, you can change that though. </script> 

我對其進行了測試，並且效果良好。 是的，它可以提高游戲的性能，因為每個畫布都可以有自己的上下文。

Answer 3

我不知道這是否正確，但是根據我的經驗，如果您使用兩個具有相同幀（刷新）速率的畫布，則性能提升將很小，如果有的話。 如果Canvas 1的刷新率低於Canvas 2，您將得到改善。一個很好的用例是網格和移動的對象。 如果網格沒有變化，則不必重新繪制網格。 這不適用於移動的對象，因為您希望看到它在移動。