Question

我试图找出在画布上进行移动的正确方法。从我的研究看来，许多教程都使用重绘。我通过清理形状并重新创建它们来重新开始工作（重绘？）：http://pastebin.com/VuYdtM2U

我想知道，如果这是应该做的方式，或者是否有更好的方法。我可以想象清除一个图像并在每一秒钟内创建一个像素就会造成资源密集。

Answer 1

一般来说，它只是这样做的。大多数浏览器游戏都是以这种方式编码的，并且可以无缝地进行大量清理和重新渲染。现代浏览器可以毫不拖延地处理大量渲染。

背后的主要原因是，Canvas只是浏览器的一种形象，它只是依靠它而不必保留任何Element DOM结构。

在SVG的情况下，所有元素都必须附加/删除/添加到DOM结构中，如果有很多元素则需要收费。

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

通常对于DOM元素小于10,000的页面......两者都是有效的。

你也可以使用Canvas，SVG和Multiple Canvas的混合物（就像你可能希望在另一个画布上显示悬停画布一样）..

Answer 2

试试这个

＆＃13;

    
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height=400 width=500>
<g>
<rect transform="translate(-20,-20)" height="40" width="40" style="fill:#777; stroke:none;"/>
<animateMotion fill="freeze" path="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" dur="3.14159s" repeatCount="indefinite"/>
</g>
<path d="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" style="fill:none;stroke:#F00;stroke-width:5"/>
</svg>

＆＃13;

在html5画布中移动

2 个答案: