如何提高画布的性能

Question

我想把这个游戏从1艘船升级到10,000艘船的舰队，如果它对每毫升的船只都是可行的。

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

我使用了任何地方的ES5，它更快，更受支持。缩放和旋转计算是由相机，鼠标和KeyBoard事件(不能只适用于火箭和激光束)。

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

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

我怎样才能让它更快？

怎样做才能提高业绩呢？现在，我考虑删除基于事件的ctx.rotate(alfa)和旋转图像，使用旋转图像并使用当前比例调整图像大小(仅适用于显示范围内的对象)。

谢谢。

Answer 1

如果你试图在2d画布上渲染数千件，更不用说一百万件独立的东西，你可能会遇到困难的极限。您可能会更好地使用WebGL，也许可以使用像PixiJS这样的库。

但是，如果您仍然计划使用画布，用户Blindman67在另一个问题中给出了一些关于性能的好提示。。简而言之，在您的情况下，不要使用save/restore，而是使用setTransform，并绘制大小为2 (2、4、8、16、32等)的图像。