Javascript 在画布HTML上重新绘制大量对象

是否有一种快速有效的方法来移动

画布中的大量对象

？基本上，如果有大约1000个对象，并且我想一次移动所有对象以模拟滚动，那么通过调用

drawImage（）

1000多次来重新绘制每个对象的速度非常慢

---

有没有办法优化这个？我有一个问题的示例链接（仅适用于100个对象）：

由于canvas不提供快速的低级位图复制，因此很难在多个层中进行操作，例如一次滚动整个背景，然后只渲染边缘

那你能做什么呢？简而言之，什么都没有。尤其是在滚动时，当你有或多或少的静态背景时，你可以使用多个画布来做一些技巧，但是对于移动的对象，几乎没有任何提高性能的技巧

所以，你必须等待硬件加速在所有主流浏览器中发布，我知道这听起来很可笑，但我太等了：/

---

问题是

画布从来不是为游戏设计的。它被设计成，嗯，基本上是一种即时绘图的东西，我猜设计师们脑子里有Photoshop的克隆，但绝对不是游戏，更不用说没有快速清晰操作的事实证明了这一点，当清除具有相同颜色的整个画布时，甚至没有进行优化。
如果图像已经合成，没有相对移动，并且由矩形区域定义，然后使用画布作为第一个参数并绘制到子区域应该比重新绘制所有对象快得多

您也可以将多个画布分层，然后用HTML中的对象滑动顶部画布以滚动它们

编辑：仔细阅读了您的示例后，我觉得它的实现应该类似于谷歌地图：创建画布的平铺，并在HTML页面上左/右滑动它们；一旦画布完全从屏幕上滑下（例如，从左边缘滑下），将其移动到另一侧（到右边缘），然后重新使用它进行绘制。使用此功能，您只需重新绘制与边缘上移动的画布重叠的任何对象。
您可以在第二个屏幕外画布上绘制所有对象，然后仅对整个画布进行blit（
drawImage（）
接受画布元素）

然而，如果你的目标是桌面浏览器，那么这应该是没有必要的。我已经（）简单地重新绘制了整个场景，而天真的实现速度非常快。
我所做的是解决这个问题，我的屏幕上有10个正方形，我想在白色背景上制作它们的动画。所以我在画布上画了一个白色的矩形来清除画布，这样动画就可以工作了。这有意义吗

@顺便说一下，我在画布上读到的Ivo是为游戏等应用程序设计的，因为它是一种摆脱对外部引擎依赖的解决方案。画布是内置的，所以它有点像一个内置在浏览器中的flash播放器，由JavaScript驱动。我认为这很有趣。
您可以使用平铺渲染。
（最好用Chrome观看）
图像是静态的（非动画的）？我不能保证，但如果有静态图像的优化，我很乐意听到。Minecraft艺术品的道具：）ffffuuuuu。将不得不优化，直到我不能再优化。我的小引擎的优点是它可以与DOM和canvas一起工作。是的，似乎我的自动重画区域是为了加快速度，但却使它变得更糟。虽然我认为当只有少数物体在移动时，它将受益匪浅。