时间戳

首页 > 解决方案 > 如何提高画布性能

javascript - 如何提高画布性能

问题描述

如果可能达到数百万艘船，我想将游戏从 1 艘船扩展到 10 000 艘船的舰队。

画布绘制所有你告诉他画的东西，即使它是负坐标。所以我只绘制显示范围内的游戏对象。

我在任何地方都使用了 ES5，它更快且支持更多。缩放和旋转计算由相机、鼠标和键盘事件进行（不能仅适用于火箭和激光束）。

但是这部分代码使用了主要时间，用于显示范围内的每个游戏对象（可能有数千个游戏对象或很少）：

`ctx.save()
ctx.translate(drawX, drawY);
ctx.rotate(alfa);
ctx.drawImage(images.image, -width/2, -height/2, width, height);
ctx.restore()`

我怎样才能让它更快？

提高性能最好的方法是什么？现在我考虑ctx.rotate(alfa)根据事件删除和旋转图像并使用旋转图像并使用当前比例调整该图像的大小（仅适用于显示范围内的对象）。

谢谢。

标签： javascriptperformancecanvasmemory

解决方案

如果您尝试仅在 2d 画布中渲染数千个（更不用说一百万个）独立事物，您可能会遇到严格的限制。使用 WebGL 可能会更好，也许使用像PixiJS这样的库。

但是，如果您仍打算使用画布，用户 Blindman67 在另一个问题中给出了一些关于性能的好技巧。简而言之，对于您的情况，请避免使用save/restore并setTransform改为使用，并绘制尺寸为 2 次方（2、4、8、16、32 等）的图像。

推荐阅读