HTML5画布：重新绘制对象还是使用位图更好？

Question

我的项目有一个HTML5画布，上面反复绘制图形对象。这些对象变化很快，绘制它们需要时间。我该如何让它更快？

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

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

所有操作必须在客户端完成（即不能使用现成的图像）。

1. 使用HTML5 Canvas，最好的方法是什么？
2. 这是个好主意吗，还是使用位图的开销比每次重新绘制对象更大？

- travelboy

Answer 1

缓存！查看Simon Sarris的这篇文章和我的发现。基本上，你可以在内存中创建画布，将内容复制到那里并重复使用它们。这样做会显著提高性能。

旋转精灵图（未缓存）

旋转精灵图（已缓存）（向上走寻找僵尸）

第二个例子应该会有很大的改善。

编辑

缓存的 JSFiddle 示例

未缓存的 JSFiddle 示例

如果您仅凭演示无法看到性能提升，则可以查看Simon在评论中发布的JSperf调查结果。

- Loktar

---

我尝试了你的演示，并且在win7上的Firefox7上，我并没有看到缓存和非缓存之间有太大的区别。但我仍然同意使用缓存，因为当绘制“对象”（多边形/渐变）时，缓存要快得多。当缓存时旋转速度更快的原因是因为新浏览器的渲染API支持。 - Niko

此外，这篇文章提供了关于画布性能的很棒的技巧：http://www.html5rocks.com/en/tutorials/canvas/performance/ - Joseph Yaduvanshi

@Niko，我需要更新我的演示文稿，它现在相当陈旧了。你会看到主要的性能提升是当你在屏幕上添加几百个元素时。 - Loktar

我也没有感觉到（Safari）性能上的差异，但是你的见解非常有帮助。现在正在查看这些文章... - travelboy

真的吗？我刚在Chrome上测试了一下，对我来说仍然有相当明显的差异。 - Loktar

Answer 2

根据每秒钟可能更改的对象数量以及因此需要重新绘制的对象数量和方式，超出缓存的重绘可能是一个不错的选择。

总体上，我建议考虑以下决策路径。

你提到有100种不同的方式可以呈现你的其中一个对象。

这可以被视为每个对象理论上可能的最小99^2个状态转换之一。

如果这些状态转换在形状/大小/颜色上具有戏剧性，但仍然可以明确定义、标记和管理，那么将100种不同的外观缓存一次以供所有对象使用可能会显着提高性能。

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

实际上，如果绘制对象动态地且尤其是持续地发生变化，预渲染的图像可能不适合您的性能需求，因为预渲染的图像需要在每个状态转换时完全绘制，而重新绘制对象则可能意味着更少的计算负载。

- Federico Zancan