我正在使用 html5 画布来绘制许多小对象。我有一个循环定期更新对象的状态并重绘它们。大多数对象很少更改（有点像背景），但现在我在主循环的每次迭代中循环遍历所有对象。我想避免这种情况，因为随着对象数量的增加，应用程序会冻结。
我的想法是将相对静态的对象绘制到背景矩形上一次，并在每次迭代时重新绘制该矩形，而不是循环遍历每个对象。仅当不经常更改的对象之一发生更改时，才会更新背景图像。
我不确定如何使用画布完成此操作，或者这是否是解决我的问题的最佳方法。
问问题
94 次
1 回答
1
您可以使用“多画布”方法，其中画布是一个“图层”（想想 Photoshop 或 GIMP），它们相互堆叠。制作动画时，您只需要重绘需要重绘的画布或“图层”。例如，在您拥有的 10 层中，只有 5、7、8 层需要重绘。您不必重新绘制其余部分（1、2、3、4、5、9 和 10），因为它们位于孤立的画布中。因此，在整个场景中，您只重绘 3 个对象，而不是全部 10 个。
KineticJS框架应用了这个概念，并且非常擅长。它的Kinetic.Layer类基本上每个都创建一个画布，彼此堆叠。
于 2013-09-15T02:30:36.343 回答