在画布上重绘很多对象HTML

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

无论如何要优化这个吗？我有这个问题的一个例子链接（并与100个对象是唯一）：http://craftyjs.com/isometric/

来源

2010-12-07 Louis

图像是否是静态的（非动画）？ – ClosureCowboy 2010-12-07 08:13:56

我不能保证，但如果有静态图像的优化，我很乐意听到它。 – Louis 2010-12-07 08:19:23

Minecraft艺术品的道具:) – Phrogz 2010-12-07 16:26:56

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

但是，如果您的目标是桌面浏览器，则不需要这样做。我有implemented tile engine（source），简单地重绘整个场景和天真的执行结果是非常快。

来源

2010-12-07 15:13:01 Kornel

因为画布不提供快速低水平位图复制很难做的东西在多层和滚动例如整个背景一次，然后只渲染边缘。

那么你能做什么？总之，没什么。特别是在滚动的时候，当你有一个或多或少的静态背景时，你可以使用多个画布做技巧，但对于移动物体，几乎没有任何性能改进技巧。

所以，你必须继续等待所有专业浏览器硬件加速出货，我知道这听起来很可笑，但我得等待那：/

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

来源

2010-12-07 08:46:51

如果图像已经合成，不相互移动，并由矩形区域定义，则使用canvas.drawImage()并将画布作为第一个参数并绘制到子区域应该比重绘要快得多所有的对象。

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

编辑：仔细看过你的例子，在我看来，它应该实现类似于谷歌地图：创建画布的瓷砖并在HTML页面上左/右滑动它们;一旦画布完全从屏幕上滑落（例如，离开左边缘），将其移到另一边（到右边缘）并重新用于绘制。有了这个，你只需要重新绘制任何与在边缘上移动的画布重叠的物体。

来源

2010-12-07 15:06:36 Phrogz

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

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

来源

2011-05-16 17:20:12 zachdyer

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

来源

2011-08-09 20:31:43 ponce

在画布上重绘很多对象HTML

回答

相关问题