canvas drawImage的性能：许多小图像与少数大图像

Question

我想知道是否有任何基准或线索可以更好地绘制一张大图像或更频繁地调用drawImage以减少图像数量。

例：

我有一个约1600x1000的画布（全屏显示时）和该尺寸的图像。 我每帧将图像绘制到画布上（因此我可以保存ctx.clearRect（））。 它有大约6个对象，我可以通过多个drawImage-calls轻松地分别绘制每个对象，但是我需要执行clearRect（）;。 每帧。

在性能方面哪个更好？

Answer 1

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

导致性能drawImage的是实际的drawImage 。 将此次数最小化将产生更好的性能。

根据评论，使用多个画布可能会具有更好的性能。 在确定是否确实有必要之前，它确实取决于您要实现的目标。 如果我们只讲6张图像，我可能不会发疯，但是在背景上有一个画布（绘制一次且您不清楚）是合理的，而其他对象则有一个画布是合理的。

Answer 2

做一些测试，我发现画布的性能取决于您要具体执行的操作，但是您必须权衡一些常规规则

-drawImage调用的次数越少越好

-您绘制的区域越小越好

绘制整个图像而不将其切片或缩放的最快

-应用于画布的转换越多，转换的速度就越慢

因此，这实际上取决于您的情况。 如果您要绘制6张10x10的正方形图像来绘制整个1000x1600图像，则只绘制较小的部分可能是值得的，但是如果您必须将它们切出较大的图像（使用drawImage（img，sx，sy，sw， sh，dx，dy，dw，dh）），您可能会发现绘制大图像的速度仍然更快。 您并没有真正地“最佳方法”来测试不同的事物。