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

我的项目有一个HTML5画布，在上面反复绘制图形对象。这些物体变化很快。画它们需要时间。我怎样才能使它更快

这些对象并不过于复杂，但包含圆弧、渐变、多边形等内容

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

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

使用HTML5画布实现这一点的最佳方式是什么

这到底是个好主意，还是使用位图的开销大于每次重新绘制对象的开销

---

快，快！退房，然后。基本上，你可以在内存中制作一个画布，将内容复制到那里，然后可以重用它们。您将看到这样做会大大提高性能

（向上走去寻找僵尸）

您应该在第二个示例中看到一个相当大的改进

编辑

Simon在评论中发表了这一点，如果你仅仅看演示看不到性能的提高，这应该会让事情变得更清楚

---

取决于一秒钟内可以更改的对象数量，以及需要重新绘制的对象数量和方式——在同一秒钟内，重新绘制的对象可能比缓存多

一般情况下，我建议考虑以下的决定路径。 您提到，其中一个对象可以有100种不同的显示方式

这可以被视为与每个对象至少99^2个理论上可能的状态转换类似

这些状态转换在形状/大小/颜色上是否引人注目，但它们仍然被很好地识别、标记和管理？如果是这样，缓存100个不同的外观供所有对象使用可能是一个显著的性能改进

反之，如果-例如，背景几乎不变化，并且绘制部分占用对象区域的不相关部分，则可以认真考虑每次重新绘制。

---

事实上，如果绘制的对象发生动态变化，特别是连续变化，预渲染图像就无法满足性能要求，由于预渲染图像需要在每次状态转换时完全绘制，而重绘对象可能意味着更少的计算负载。

我在win7上的Firefox7上试用了您的演示，但我看不出缓存和非缓存之间有多大区别。我仍然同意使用缓存，因为在绘制“对象”（多边形/渐变）时，缓存要快得多。缓存时旋转速度之所以快得多，是因为较新的browsersAlso提供了渲染api支持。因此，这篇文章非常适合介绍画布性能的技巧：@Niko我需要更新我的演示，它现在已经很旧了，你看到的主要性能提升是当你在屏幕上再添加几百个时。我也看不出性能有什么不同（Safari），但你的见解非常有用。现在查看文章…真的吗？我刚刚在chrome上进行了测试，对我来说仍然有相当明显的不同。