在html5画布中保存矩形以便将来渲染？

Question

我使用html5画布绘制许多小物件。我有一个循环，定期更新对象的状态并重绘它们。大多数对象都会很少改变（有点像背景），但是现在我在主循环的每次迭代中循环遍历所有对象。我想避免这种情况，因为随着对象数量的增加，应用程序会冻结。

我的想法是将相对静态的对象绘制到背景rect上，并在每次迭代时重绘这个rec​​t而不是循环遍历每个对象。只有在不经常更改的对象之一发生更改时，才会更新背景图像。

我不知道如何使用画布完成此操作，或者这是解决问题的最佳方法。

Answer 1

您可以执行“多画布”方法，其中画布是“图层”（想想photoshop或GIMP），它们堆叠在一起。动画制作时，您只需要重绘需要重绘的画布或“图层”。例如，在你拥有的10个图层中，只有5,7,8个需要重绘。你可以自己重新绘制其余部分（1,2,3,4,5,9和10），因为它们位于隔离的画布中。因此，在整个场景中，您只重绘3个对象而不是全部10个。

KineticJS框架适用于这个概念，并且它非常擅长。它的Kinetic.Layer类基本上每个都创建一个画布，堆叠在一起。