Question

我一直在想，对画布进行分层实际上是否是一种提高游戏性能的有效方法。

例如，两张或三张相同大小的画布彼此叠放。

很难从中找到测试结果，但是根据我对绘图的了解，如果更改了其他图层之上的图层，则浏览器无论如何都必须将该区域重新绘制为像素。此外，如果所有画布都必须同时移动，那么您需要乘以的像素数就会增加。

我想知道如果上方的元素发生变化，浏览器如何处理其他下方的绘画画布。

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

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

3 个答案: