javascript - HTML5 Canvas 与 SVG + Raphael.js 的优缺点是什么？

Question

我刚刚使用 Canvas 开始了一个项目。但我需要做的一件事是跟踪可移动的、可点击的框，如本例所示:http://raphaeljs.com/graffle.html所以我想知道 Raphael-js + SVG 是否会更好。

你会用哪个？为什么？

Answer 1

这个答案是从我对另一个问题的回答中复制过来的。但是 OP 然后改变了问题，因此这个答案变得不那么相关了。恕我直言，它与这个问题更相关，所以这里是:

---

将 canvas 和 svg 之间的区别想象成 Photoshop 和 Illustrator(或者对于 OSS 用户来说是 Gimp 和 Inkscape)之间的区别。一个处理位图，另一个处理矢量艺术。

使用 Canvas ，因为您是在位图中绘制，所以您可以轻松地对图像进行涂抹、模糊、加深、减淡处理。但由于它是位图，您不能轻易地画一条线然后决定重新定位该线。您需要删除旧线，然后再绘制一条新线。

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

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