javascript - canvas 的 drawImage 性能 : many small images vs few large

Question

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

示例:

我有一个 ~1600x1000 的 Canvas (当全屏时)和一个大小的图像。我每帧都将此图像绘制到我的 Canvas 上(因此我可以保存 ctx.clearRect())。它有大约 6 个对象，我可以在多个 drawImage 调用中轻松地单独绘制每个对象，但我需要执行 clearRect();每一帧。

哪个在性能方面更好？

Answer 1

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

导致性能下降的是实际的 drawImage。调用它的次数最少会产生更好的性能。

根据评论，使用多个 Canvas 可能会获得更好的性能。在确定这是否真的有必要之前，它确实取决于您要实现的目标。如果我们只是谈论 6 张图片，我可能不会发疯，但为背景(绘制一次但您不清除)使用一个 Canvas ，为其他对象使用另一个 Canvas 是合理的。