我想知道是否有任何基准或线索来说明是绘制一张大图像还是更频繁地调用 drawImage 以获得更少的图像。
例子:
我有一个~1600x1000 的画布(全屏时)和一个大小的图像。我每帧都将这个图像绘制到我的画布上(因此我可以保存 ctx.clearRect())。它有大约 6 个对象,我可以很容易地在多个 drawImage 调用中单独绘制每个对象,但我需要做 clearRect(); 每一帧。
在性能方面哪个更好?
我想知道是否有任何基准或线索来说明是绘制一张大图像还是更频繁地调用 drawImage 以获得更少的图像。
例子:
我有一个~1600x1000 的画布(全屏时)和一个大小的图像。我每帧都将这个图像绘制到我的画布上(因此我可以保存 ctx.clearRect())。它有大约 6 个对象,我可以很容易地在多个 drawImage 调用中单独绘制每个对象,但我需要做 clearRect(); 每一帧。
在性能方面哪个更好?
绘制一些较大的图像将比许多小图像执行得更好。
这drawImage
是导致性能下降的实际情况。调用它的次数最少会产生更好的性能。
根据评论,使用多个画布可能会有更好的性能。在确定这是否真的有必要之前,这确实取决于您要达到的目标。如果我们只是在谈论 6 幅图像,我可能不会发疯,但是有一个画布作为背景(绘制一次并且你不清除)和另一个用于其他对象的画布是合理的。
做一些测试,我发现画布的性能取决于你具体要做什么,但是有一些你必须平衡的一般规则
-drawImage 调用越少越好
- 你画的区域越小越好
- 绘制整个图像而不切出一块或缩放它是最快的
- 你对画布应用的转换越多,它就会越慢
所以这真的取决于你的情况。如果您要在整个 1000x1600 图像中绘制 6 个 10x10 的正方形,那么只绘制较小的部分可能是值得的,但是如果您必须从较大的图像中剪切它们(使用 drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)) 您可能会发现绘制大图像仍然更快。没有真正的“最佳方式”,你只需要测试不同的东西。