javascript - CanvasRenderingContext2D.drawImage() 在大 Canvas 上的 Chrome 中非常慢

Question

我目前正在为我的 city building game 开发网络客户端(HTML5 和 JavaScript)项目。客户端通过 SignalR 与用 C#/.NET 编写的 Web 服务器交互，所有游戏逻辑都驻留在该服务器上。

实现需要相当大的 map ，它由一组代表不同层的 Canvas 元素实现。 map 的实际绘制包括绘制 25x25 像素的单元格，其中一些是动画的。这意味着在“2D 上下文”上发生了很多小的“drawImage”调用。

当前的实现在 Mozilla Firefox、Internet Explorer 和 Edge 中运行良好且流畅。然而，它在 Google Chrome 上的速度非常慢，很可能是因为该实现不能很好地使用其硬件加速渲染。

获取平铺单元格 .PNG 图像是通过从网络服务器下载它们并将它们存储在内存中的“图像”对象中来完成的。从那里，我在必要时将它们直接绘制到 Canvas 上。 如果我目前的研究正确完成，这就是瓶颈所在；源“图像”对象驻留在 CPU 内存中，而 objective-c anvas 元素针对 GPU 内存访问进行了优化，从而导致大量交换。

我曾尝试将“图像”对象移动到一个大的屏幕外“缓冲区” Canvas (足够大，以便硬件加速应该在 Chrome 上启动)但这不会产生明显的差异: https://github.com/Miragecoder/Urbanization/commit/86ac62a785b233eea28c53b8a7d474ef92ffc283

我还尝试通过 requestAnimationFrame 实现“drawImage”函数的延迟调用。但这也没有产生明显的差异。

我有以下问题:

• 我对问题的理解是否正确？
• 我可以做些什么来提高网络客户端的性能？

我研究过但到目前为止没有结果的问题的一些链接:

• HTML5 Canvas slow on Chrome, but fast on FireFox
• https://gamedev.stackexchange.com/questions/32221/huge-performance-difference-when-using-drawimage-with-img-vs-canvas
• https://code.google.com/p/chromium/issues/detail?id=170021
• Google Chrome hardware acceleration making game run slow

Answer 1

您的主要问题似乎是您用来在 Canvas 上绘制的不同图像对象的数量。你绝对应该使用 Textureatlas ，在单个图像中放置尽可能多的图形。

然后你应该通过指定相关的矩形从尽可能少的主图像中渲染你的 Sprite :

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

而不是整个图像:

void ctx.drawImage(image, dx, dy);

参见 CanvasRenderingContext2D.drawImage()了解详情。这样，您就可以避免过多的上下文切换。正如 Blindman67 所提到的，您应该尽可能少地在纹理图集之间切换 - 例如，您可能希望将单个纹理图集用于 canvas1 的所有渲染，另一个用于 canvas2 等的所有图像。