javascript - 在 html5 Canvas 中移动

Question

我正在尝试找出在 Canvas 上进行移动的正确方法。根据我的研究，似乎很多教程都使用重绘。我通过清除我的形状并重新创建它们(重新绘制？)来开始工作:http://pastebin.com/VuYdtM2U

我想知道这是不是应该这样做，或者是否有更好的方法。我可以想象清除图像并在每一分之一秒内为它创建一个像素会占用大量资源。

Answer 1

一般情况下，只能通过这种方式完成。大多数浏览器游戏都是以这种方式编码的，并且大量的清除和重新渲染是无缝进行的。现代浏览器可以毫不拖延地处理大量渲染。

这背后的主要原因是，Canvas 只是浏览器的一种图像，它只是在上面绘制，不需要保留任何 Element DOM 结构。

而在 SVG 的情况下，所有元素都必须添加/删除/添加到 DOM 结构，如果有很多元素，这会造成损失。

有几个因素可以帮助我们根据具体情况决定哪种技术更好。

一般对于 DOM 元素小于 10,000 的页面...两者都是高效的。

您还可以混合使用 Canvas 、 SVG 和 Multiple Canvas (就像您可能想在另一个 Canvas 上显示一个悬停 Canvas )。