在DOM中堆叠多个画布或在一个画布中控制所有绘图会更好吗？

Question

过去，我参与过涉及对画布进行分层的项目。 我曾与支持将画布分层的人一起工作，但是我对这是否是最好的方法强烈怀疑。

我的主要问题是：

如果将画布分层放置，并且其中之一发生更改，那么所有这些画布都会被浏览器重新粉刷以便出现。但是，这将避免对画布进行任何更新/绘制功能，或在画布上计算像素。

dom处理合成缓慢吗？如果存在通过多次绘制调用创建的图层（例如由精灵构造的复杂背景），是否可以将它们渲染到屏幕外的画布上，并使用绘制图像将该画布绘制到主画布上？

如果您要对画布进行分层，并且它们都需要在某些点绘制，由于将要计算的像素数加倍，性能不会显着下降吗？我发现在我从事过的游戏中，减小画布的尺寸可以显着提高性能，并且我尝试不超过所需的水平。

具体来说，用户对以下帖子的评论：Blindman67使我对分层多个画布感到怀疑。

How multiple canvas elements affect performance?

是否有人对这两种方法都有经验，并且知道哪种方法性能更好？浏览器速度慢吗？

Answer 1

这实际上取决于您在做什么。如果您在两个画布上都绘制了一堆东西，但是其中一个的更新频率较低，那么拥有多个画布可能是有意义的。游戏通常会针对HUD或状态执行此操作。例如，为MMORPG绘制HUD，显示100多个项目和一个聊天窗口。聊天窗口中有100个甚至1000个文本字符。这些项目可能会在每个项目的框架上绘制，因此，如果仅此而已，则很容易绘制1200项内容。如果每个项目的平均名称为10个字符，则还需要绘制1000个字符。

如果它们不经常更改（如在每一帧中一样），则某些游戏会将它们绘制到纹理上（这是在画布上绘制的内容），然后仅在每帧绘制纹理（一次绘制）。当然，如果您正在浏览器中进行游戏，则可以将浏览器本身用于HUD，而不是其他画布。

作为一个数据点，这就是浏览器本身所做的事情（或者至少Chrome和Firefox在某个时间点所做的事情）

您曾经能够以3D格式在Firefox中显示纹理。所示的每个“层”实际上都是一个内部画布，Firefox将其渲染到了页面的该部分，希望它不必再次渲染它们。当页面的一部分发生更改时，仅需要重新渲染包含更改部分的纹理，然后重新组合所有现有的纹理以重新绘制页面。这比绘制1000个单个字符，边框，背景等要快得多。

所以这个概念有一点意义，但就像所有评论一样，都提到“取决于”。

我曾经用几乎都是静态的平铺背景制作了一个gamejam游戏。可以说，需要绘制的是30x20的瓦片，即600瓦片。绘制后，背景基本上是静态的，因此将其绘制到画布中并将字符放置在上方的单独画布中具有一定意义。