我刚刚开始使用 Canvas 的项目。但我需要做的一件事是跟踪可移动的、可点击的框，如本例所示：http ://raphaeljs.com/graffle.html所以我想知道 Raphael-js + SVG 是否会更好。
你会用哪个？为什么？
问问题
10533 次
2 回答
23
这个答案是从我对另一个问题的回答中复制而来的。但是 OP 然后改变了问题，因此这个答案变得不那么相关了。恕我直言，它与这个问题更相关，所以这里是：
将 canvas 和 svg 之间的区别想象成 Photoshop 和 Illustrator（或者 Gimp 和 Inkscape 对于 OSS 人员）之间的区别。一个处理位图，另一个处理矢量艺术。
使用画布，由于您是在位图中绘制，因此您可以轻松地涂抹、模糊、燃烧、闪避您的图像。但是由于它是位图，您不能轻易地画一条线然后决定重新定位该线。您需要删除旧线，然后绘制新线。
使用 svg，由于您正在绘制矢量，因此您可以轻松地移动、缩放、旋转、重新定位、翻转您的绘图。但由于它是矢量，因此您无法根据线条粗细轻松模糊边缘，也无法将红色圆圈无缝融合到蓝色方块中。您需要通过在对象之间绘制中间多边形来模拟模糊。
有时他们的用例重叠。例如，很多人使用画布来绘制简单的线条图，并将对象作为 javascript 中的数据结构进行跟踪。但实际上，它们都有不同的用途。如果您尝试在画布上用纯 javascript 实现通用矢量绘图，我怀疑您会比使用最有可能在 C 中实现的 svg 更快。
于 2010-08-23T14:18:12.053 回答
5
有几件事需要决定——你想让你的东西在移动浏览器中工作吗？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。
于 2010-08-23T20:58:50.577 回答