canvas drawImage的性能：许多小图像vs很少

Question

我想知道是否有任何基准或线索关于是否更好地绘制一个大图像或更频繁地调用drawImage以获得更少的图像。

示例：

我的画布大约为1600x1000（全屏时）和大小的图像。我在每个帧上将这个图像绘制到我的画布上（因此我可以保存ctx.clearRect（））。它有大约6个对象，我可以在多个drawImage调用中自己绘制每个对象，但我需要做clearRect（）;每一帧。

在性能方面哪个更好？

Answer 1

绘制一些较大的图像将比许多小图像表现更好。

导致性能下降的实际drawImage。以最少的次数调用这将产生更好的性能。

根据评论，使用多个画布可能会有更好的表现。在确定这是否真的有必要之前，它确实取决于您要实现的目标。如果我们只是在谈论6张图片，我可能不会发疯，但是为背景设置一个画布是合理的（一次画一次，你不清楚），另一个用于其他画面。

Answer 2

进行一些测试，我发现画布的性能取决于你想要做的具体内容，但是你需要平衡一些一般规则

- drawImage调用越少越好

- 您绘制的区域越小越好

- 绘制整个图像而不切片或缩放它是最快的

- 您应用于画布的转换次数越多

所以这真的取决于你的情况。如果你在整个1000x1600图像中绘制6个10x10正方形，那么绘制较小的图像可能是值得的，但是如果你必须从较大的图像中剪切它们（使用drawImage（img，sx，sy，sw， sh，dx，dy，dw，dh））你可能会发现绘制大图像仍然更快。实际上并没有一种“最佳方式”可以用来测试不同的东西。