我刚刚使用 Canvas 开始了一个项目。但我需要做的一件事是跟踪可移动的、可点击的框，如本例所示：http://raphaeljs.com/graffle.html 所以我想知道 Raphael-js + SVG 是否会更好。
你会用哪个？为什么？
【问题讨论】：
标签： javascript svg raphael html5-animation
这个答案是从我对另一个问题的回答中复制而来的。但是 OP 然后改变了问题，因此这个答案变得不那么相关了。恕我直言，它与这个问题更相关，所以这里是：
将 canvas 和 svg 之间的区别视为 Photoshop 和 Illustrator（或者对于 OSS 人员来说是 Gimp 和 Inkscape）之间的区别。一个处理位图，另一个处理矢量图。
使用画布，由于您是在位图中绘图，因此您可以轻松地涂抹、模糊、燃烧、闪避您的图像。但由于它是位图，您不能轻易地画一条线，然后决定重新定位该线。你需要删除旧线，然后再画一条新线。
使用 svg，由于您正在绘制矢量，因此您可以轻松地移动、缩放、旋转、重新定位、翻转您的绘图。但由于它是矢量，因此您无法根据线条粗细轻松模糊边缘，也无法将红色圆圈无缝融合到蓝色方块中。您需要通过在对象之间绘制中间多边形来模拟模糊。
有时它们的用例会重叠。例如，很多人使用画布来绘制简单的线条图，并将对象作为 javascript 中的数据结构进行跟踪。但实际上，它们都有不同的用途。如果您尝试在画布上使用纯 javascript 实现通用矢量绘图，我怀疑您会比使用最有可能在 C 中实现的 svg 更快。
【讨论】：
需要决定的几件事 - 您希望您的东西在移动浏览器中运行吗？ SVG（Raphael）不能在 android 上工作（不知道 iphone）。相反，如果您想要一些可以在旧版本的 Internet Explorer 上使用的东西，canvas 可能无法使用（不确定 ExCanvas 是否支持 IE6），但 SVG 在某种程度上可以（Raphael 支持 IE6）。
另外，您是在做动画/绘图，还是在做一个完整的应用程序，可能需要按钮、滑块、选项卡容器、列表、网格等。
如果您正在创建一个完整的应用程序并且希望它也可以在移动设备上运行，您可以查看 dojo 工具包，特别是 dojox.gfx 和其他图形 dojox 库： http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/
dojox.gfx 是一个矢量图形库，支持多种后端：canvas、SVG，甚至 silverlight。这是一篇与拉斐尔比较的文章：http://www.lrbabe.com/?p=217
还可以查看 cake.js 以获取用于画布的独立场景图库： http://code.google.com/p/cakejs/ 并查看 processingjs。
【讨论】：