在Canvas HTML上重绘大量对象

Question

是否有快速有效的方法在canvas中移动大量对象？基本上，如果有大约1000个对象，并且我想一次移动所有对象来模拟滚动，则通过调用drawImage() 1000次来重绘每个对象是非常慢的。

有没有优化这个？我有一个问题的示例链接（并且只有100个对象）：http://craftyjs.com/isometric/

Answer 1

由于canvas不提供 fast 低级别位图复制，因此难以在多个图层中执行操作并立即滚动整个背景，然后仅渲染边缘。

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

所以，你要在所有主要浏览器中等待硬件加速运输，我知道这听起来很荒谬，但我太等了：/

问题是canvas从未设计过游戏内容。它被设计为，基本上是某种飞行绘图的东西，猜测设计师有Photoshop克隆的想法，但绝对不是游戏，更不用说没有快速清晰操作的事实证明，当用相同的颜色清除整个画布时，甚至没有适当的优化。

Answer 2

如果图像已经合成，没有相对于彼此移动，并且由矩形区域定义，则使用带有画布的canvas.drawImage()作为第一个参数并绘制到子区域应该明显快于重新绘制所有对象。

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

编辑：看了你的例子后，在我看来它应该像谷歌地图一样实现：创建画布图块并在HTML页面上左/右滑动它们;一旦画布完全滑出屏幕（例如，离开左边缘），将其移动到另一侧（右边缘）并重新用于绘图。通过这种方式，您只需要重新绘制与在边缘上移动的画布重叠的任何对象。

Answer 3

您可以在屏幕外的第二个画布上绘制所有对象，然后只显示整个画布（drawImage()接受画布元素）。

但是，如果您的目标是桌面浏览器，那么这不是必需的。我implemented tile engine（source）只是简单地重绘整个场景，天真的实现结果非常快。

Answer 4

我为解决这个问题所做的是我在屏幕上有10个方格，我想在白色背景上制作动画。所以我在画布上画了一个白色矩形来清除画布，这样动画就可以了。这有意义吗？

@Ivo顺便说一下，我在http://www.w3.org/TR/html5/the-canvas-element.html上看到画布是为游戏等应用程序而制作的，因为它是摆脱对外部引擎的依赖的解决方案。 Canvas是内置的，因此它有点像浏览器内置的JavaScript内置的JavaScript。我认为这很有趣。

Answer 5

您可以使用平铺渲染。 http://www.gamesfrommars.fr/demojsv2/（使用Chrome浏览器更好看）