问HTML5帆布与SVG与div？

HTML5 Canvas只是一个位图的绘图表面。你设置绘画（用颜色和线条的粗细来说），绘制这个东西，然后画布不知道这个东西：它不知道它在哪里或者你刚画出来的是什么，它是只是像素。如果你想绘制矩形，让它们四处移动或者可以选择，那么你必须从头开始编写所有的代码，包括记住你画的代码。

另一方面，SVG必须保持对呈现的每个对象的引用。您创建的每个SVG / VML元素都是DOM中的一个真实元素。默认情况下，这可以让您更好地跟踪所创建的元素，并且默认情况下更容易处理像鼠标事件这样的事情，但是当存在大量对象时会显着减慢,那些SVG DOM引用意味着处理你绘制的东西的一些步骤是为你完成的。渲染真正的大对象时SVG速度更快，但渲染许多对象时速度更慢。

Canvas中的游戏可能会更快。一个巨大的地图程序在SVG中可能会更快。如果你想使用Canvas，我有一些关于获取可移动对象的教程。

画布对于更快速的事情和繁重的位图操作（比如动画）会更好，但是如果你想要很多的交互性，将需要更多的代码。

我已经在HTML DIV制作的绘图和Canvas制作的绘图上运行了一堆数字。我可以写一个关于每个好处的巨大的帖子，但我会给我的测试的一些相关的结果考虑你的具体应用：

我做了Canvas和HTML DIV测试页面，都有可移动的“节点”。画布节点是我创建的对象，并在Javascript中保持跟踪。 HTML节点是可移动的Div。

我为每个测试添加了100,000个节点。他们的表现完全不同：

HTML测试选项卡永久加载（定时稍微在5分钟以内，第一次请求杀死页面）。 Chrome的任务管理器说该标签占用了168MB。当我看的时候，占用12-13％的CPU时间，当我不看的时候占用0％。

“画布”选项卡在一秒钟内加载，占用30MB。无论是否正在查看，它总是占用CPU时间的13％。 （2013年编辑：他们主要是固定的）因为当前的设置是在Canvas测试中每30毫秒重新绘制一次，所以在HTML页面上拖动更加平滑，这是设计期望的。 Canvas对此有很多优化。 （帆布失效是最简单的，也裁剪区域，有选择性的重绘，等等。只是取决于你有多少感觉实施）毫无疑问，你可以让 Canvas在对象操作上更快，就像在这个简单的测试中的div一样，当然，加载时间也会更快,Canvas中的绘图/加载速度更快，而且还有更多的优化空间（也就是说，排除非屏幕的东西非常容易）。

结论：

SVG对于应用程序和应用程序而言可能更好（少于1000个？实际取决于）

画布对于成千上万的对象和小心的操作是更好的，但是需要更多的代码（或者库）才能实现。

HTML Div是笨重的，不能缩放，只有圆角可能会使圆形成为可能，但复杂的形状是可能的，但涉及数以百计的微小像素宽度的div。疯狂随之而来。

SVG 对你来说更容易一些，因为选择和移动它已经是内置的.SVG对象是DOM对象，所以它们具有“点击”处理程序等等。

DIV可以，但笨重，并有大量的可怕的性能加载。

画布具有最好的性能，但是你必须自己实现管理状态（对象选择等）的所有概念，或者使用一个库。