我的项目有一个 HTML5 Canvas，在上面重复绘制图形对象。这些对象变化很快。绘制它们需要时间。我怎样才能让它更快？
对象并不过分复杂，但包含圆弧、渐变、多边形等内容。
一个对象的外观取决于大约 10 个属性，每个属性都有大约 10 个值之一。这意味着一个物体只能有大约 100 种不同的外观。这就是为什么我考虑只绘制一次外观，然后缓存位图以供重复使用。
一切都必须在客户端上运行(即我不能使用现成的图像)
最佳答案
缓存缓存缓存!查看this article by Simon Sarris , 和 my own findings .基本上你在内存中制作一个 Canvas ，复制那里的内容，你可以重用它们。这样做你会看到巨大的性能提升。
Rotating sprites without caching
Rotating sprites WITH caching (向上走找到僵尸)
您应该会在第二个示例中看到相当大的改进。
编辑
Simon 在评论中发布了此内容，如果您仅通过查看演示看不到性能提升，那么这些内容应该真的很清楚。
关于javascript - HTML5 Canvas : better to re-draw objects or use bitmaps?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7674421/
