HTML5 Canvas：更好地重新绘制对象或使用位图？

Question

我的项目有一个HTML5 Canvas，在其上重复绘制图形对象。这些物体迅速变化。绘制它们需要时间。我怎样才能让它更快？

对象并不过分复杂，但包含弧形，渐变，多边形等内容。

对象的外观取决于大约10个属性，每个属性具有大约10个值中的一个。这意味着只有大约100种不同的外观而不是对象可以拥有的外观。这就是为什么我只考虑绘制每个外观一次然后缓存位图以便重复使用。

一切都必须在客户端上工作（即我不能使用现成的图像）​​

1. 使用HTML5 Canvas执行此操作的最佳方式是什么？
2. 根本不是一个好主意，或者使用位图的开销大于每次重新绘制对象的开销？

Answer 1

缓存缓存缓存！查看this article by Simon Sarris和my own findings。基本上你在内存中制作一个画布复制那里的内容，你可以重复使用它们。你会看到这样做会带来巨大的性能提升。

Rotating sprites without caching

Rotating sprites WITH caching（向上走，找到僵尸）

你应该看到第二个例子有了很大的改进。

修改

jsfiddle example cached

jsfiddle example not cached

Simon在评论中发布了这一点，如果你只是通过观看演示就无法看到性能提升，那么这应该可以解决问题。

JSperf findings by Simon Sarris

Answer 2

取决于一秒钟内可以更改的对象数量，以及因此需要重绘的对象数量以及如何在同一秒内重绘，而不是重新绘制可能是一种选择。

总的来说，我建议考虑以下决策路径。

您提到可以有100种不同的方式来显示您的某个对象。

这可以被认为类似于每个对象的理论上可能的最小状态转换99 ^ 2。

这些状态转换在形状/大小/颜色上是否显着，但它们仍然可以很好地识别，标记和管理？如果是这样，只缓存100个不同的外观以供所有对象使用，可能会显着提升性能。

相反，如果 - 仅举例 - 背景几乎没有变化，并且绘制的部分占据了对象区域中较不相关的部分，您可以认真考虑每次重绘它。

事实上，如果您的绘制对象动态变化（尤其是连续变换），预渲染图像无法满足您的性能需求，因为需要在重绘对象时在每个状态转换时完全绘制预渲染图像可能意味着更少的计算负荷。