Javascript 多个画布元素如何影响性能？

我试图在画布上制作一个简单的游戏（从上面看）。请告诉我哪一个更快：

1） 在一个

上绘制所有内容，并计算需要重新绘制的区域

2） 在不同的

元素上绘制场景的某些部分，并仅在必要时更新每个部分。在it变体中，我可能还可以使用部分重画

例如，我可以在一个元素上绘制地图，在第二个元素上绘制敌人，在第三个元素上绘制光标等等。移动敌人时，我只能重新绘制第二张画布

---

请尽可能详细地解释哪个选项更好以及为什么。你能给我一些书，让我加深对这个问题的认识吗？对于初学者。

大多数画布游戏都会使用您所描述的某种层次。最靠前的一层是HUD，可以是一个单独的画布，也可以是HTML元素，只有当它发生了什么事情，比如有人升级了他们的播放器时，它才会改变。然后，这取决于他们如何绘制画布。最简单的方法是简单地画出地图的部分，障碍物就在屏幕上。

相信我，用一张画布。如果你有一个精灵，它什么也不做，只是坐在那里，它仍然每秒被画60次，所以它是移动还是不改变与否没有区别。如果它存在于屏幕上，它被画出来，而不管改变。

你的问题是无法回答的，因为它将取决于代码必须做什么。复杂性只会让CPU工作。保持简单的性能。大多数游戏将使用一个显示画布，并每帧（1/60秒）重新绘制整个画布。获得知识的最好方法就是这样做，所以打开一个IDE并开始编写代码，您很快就会得到答案。顺便说一句，跟踪重画区域是一条死胡同。为什么你认为跟踪重画区域是一条死胡同？我认为这应该会减少负载。它的所有关于PPS（每秒像素数）的东西都是GPU速度快，而不是javascript。为了理解我的意思，创建一个画布并获取上下文，然后运行

const test=s=>{var n=performance.now（）；for（var I=0；I<10000；I++）{ctx.clearRect（0,0，s，s）；}console.log（（performance.now（）-n/（s*s））；}test（10）；测试（300）第二次调用清除像素的速度快约10000倍。您确实意识到，如果在一帧期间将像素写入任何层，则在另一个画布上分层仍然需要一帧合成一次。事实上，让DOM处理（糟糕的）合成比通过javascript中的drawImage处理（良好的）合成要慢，因为这样你可以走一些DOM不会意识到的捷径。好吧，它的全部要点是不要像游戏画布那样频繁地重绘，仅一次更改。如果在任何分层上修改单个像素，则必须合成所有层。具有背景和前景分层画布。您需要清除前景才能在其上绘制。退出时，DOM将重新映射背景画布和前景画布。但是，如果您将背景保持在屏幕外，并使用它清除
ctx.drawImage（bgCanvas，0,0）
而不是使用
ctx.clearRect
，则可以节省整个屏幕的像素写入量。分层画布不会自动合成，它们需要GPU就像drawImage调用一样。什么比JS慢？？大教堂