分层多个画布的效率如何？

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，您将得到改善。一个很好的用例是网格和移动的对象。 如果网格没有变化，则不必重新绘制网格。 这不适用于移动的对象，因为您希望看到它在移动。