HTML5 Canvas和SVG + Raphael.js有什么优缺点？

Question

我刚开始使用Canvas做一个项目。但是我需要实现像这个例子中一样的可移动、可点击的方块：http://raphaeljs.com/graffle.html，所以我想知道Raphael-js + SVG是否更好。

你会选择哪个？为什么？

- interstar

---

RaphaelJS不仅仅是SVG，因此可以在没有Canvas支持的浏览器（例如IE）中使用（尽管有一个针对IE的Canvas模拟器）。 - Ken

Answer 1

这个答案是我回答另一个问题时的复制。但是 OP 后来改变了问题，因此这个答案对此不再那么相关。在我的看法中，它与这个问题更相关，所以请看下面:

---

将 canvas 和 svg 的区别视为 Photoshop 和 Illustrator（或者 Gimp 和 Inkscape 对于您开源软件爱好者而言）之间的区别。一个处理位图，另一个处理矢量图。

使用 canvas 时，由于您正在绘制位图，因此可以轻松涂抹、模糊、烧焦和闪避图像。但是，由于它是位图，您不能轻松地画一条线，然后决定重新定位该线。您需要删除旧线，然后画一条新线。

使用 svg 时，由于您正在绘制矢量，因此可以轻松移动、缩放、旋转、重新定位、翻转您的绘画。但是，由于它是矢量，您不能轻松地根据线条粗细模糊边缘或将红色圆形无缝融合到蓝色正方形中。您需要通过在对象之间绘制中间多边形来模拟模糊。

有时它们的用例会重叠。例如，许多人使用 canvas 进行简单的线条绘制，并在 JavaScript 中作为数据结构跟踪对象。但实际上，它们都有不同的用途。如果尝试在 canvas 上纯粹使用 JavaScript 实现通用矢量绘图，则我怀疑您的速度比使用 C 实现的 svg 更快。

- slebetman

---

变形SVG路径是完全可以实现的，例如将圆形变成蓝色正方形（尽管您需要将形状表示为路径元素）。请注意，SVG还具有过滤器，添加模糊效果并不比在SVG文件中添加属性和过滤器定义更难。 - Erik Dahlström

@Erik：我不是在谈论变形，而是指通过模糊效果使形状相互融合。例如，一张（非动画，静态）红色圆形图案和一个蓝色正方形图案相互融合，它们融合点的颜色将为紫色，并且边缘会自然地模糊到一起。这在Photoshop和指尖工具中很简单，但在Illustrator中要做到这一点就比较困难。 - slebetman

@Erik：此外，仅仅使用滤镜来根据线条的粗细改变模糊程度非常困难。可能可以使用多个滤镜来实现，但这肯定不是一件简单的事情。 - slebetman

Answer 2

需要决定的一些事情 - 你是否希望你的东西在移动浏览器中工作？SVG（Raphael）在Android上不会工作（不确定iPhone如何）。相反，如果您想要适用于旧版本Internet Explorer的内容，则canvas可能无法正常工作（不确定ExCanvas是否支持IE6），但是SVG在某种程度上可以（Raphael支持IE6）。

另外，您只是在做动画/绘图，还是正在进行完整的应用程序，可能需要诸如按钮、滑块、选项卡容器、列表、网格等东西。

如果您正在创建完整的应用程序并希望它也适用于移动设备，请查看Dojo Toolkit，特别是dojox.gfx和其他图形Dojox库： http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/

dojox.gfx是一个矢量图形库，支持多个后端：canvas、SVG，甚至silverlight。这里有一篇文章将其与raphael进行比较：http://www.lrbabe.com/?p=217

还可以检查cake.js，以获取用于canvas的独立场景图库： http://code.google.com/p/cakejs/ 还要检查processingjs。

- edtechdev

---

啊...这个很有用：Android不支持SVG / Raphael。 - interstar

ExCanvas支持IE6，但要注意，它并不涵盖所有Canvas功能。 Android将在未来的版本中支持SVG。 iPhone/iPad支持SVG。 直到IE 9版本，IE才支持SVG。 - Dmitry Baranovskiy

此外，您指向的文章已经超过一年了，因此已经过时。 - Dmitry Baranovskiy

更新，因为我刚刚找到了这个答案：2011年之后的所有浏览器都完全支持SVG和Canvas。IE8及以下版本均不支持。 - Nathan Hinchey