javascript - HTML5 Canvas : better to re-draw objects or use bitmaps?

Question

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

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

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

一切都必须在客户端上运行(即我不能使用现成的图像)​​

1. 使用 HTML5 Canvas 执行此操作的最佳方法是什么？
2. 这到底是个好主意还是使用位图的开销比每次都重新绘制对象大？

Answer 1

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

Rotating sprites without caching

Rotating sprites WITH caching (向上走找到僵尸)

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

编辑

jsfiddle example cached

jsfiddle example not cached

Simon 在评论中发布了此内容，如果您仅通过查看演示看不到性能提升，那么这些内容应该真的很清楚。

JSperf findings by Simon Sarris