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

What are the pros and cons of HTML5 Canvas vs. SVG + Raphael.js?

提问by interstar

I just started a project using the Canvas. But one of the things I need is to keep track of movable, clickable boxes as in this example : http://raphaeljs.com/graffle.htmlso I'm wondering if Raphael-js + SVG would be better.

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

Which would you use? And why?

你会用哪个？为什么？

回答by slebetman

This answer is copied from my answer to another question. But the OP then changed the question and therefore this answer became less relevant to it. IMHO it is more relevant to this question so here goes:

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

---

---

Think of the difference between canvas and svg as the difference betwee Photoshop and Illustrator (or Gimp and Inkscape for you OSS folks). One deals with bitmaps and the other vector art.

将画布和 svg 之间的区别视为 Photoshop 和 Illustrator（或 OSS 人员的 Gimp 和 Inkscape）之间的区别。一个处理位图，另一个处理矢量图。

With canvas, since you are drawing in bitmap, you can smudge, blur, burn, dodge your images easily. But since it's bitmap you can't easily draw a line and then decide to reposition the line. You need to delete the old line and then draw a new line.

使用画布，由于您是在位图上绘制，您可以轻松地涂抹、模糊、刻录、躲避您的图像。但是由于它是位图，因此您无法轻松绘制一条线然后决定重新定位该线。您需要删除旧线，然后绘制一条新线。

With svg, since you are drawing vectors, you can easily move, scale, rotate, reposition, flip your drawings. But since it's vectors you can't easily blur the edges according to line thickness or seamlessly meld a red circle into a blue square. You need to simulate blurring by drawing intermediate polygons between objects.

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

Sometimes their use case overlaps. For example a lot of people use canvas to do simple line drawings and keep track of the objects as data structures in javascript. But really, they both serve different purposes. If you try to implement general purpose vector drawing in pure javascript on top of canvas I doubt you'd be faster than using svg which is most likely implemented in C.

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

回答by edtechdev

A couple things to decide - do you want your stuff to work in mobile browsers? SVG (Raphael) isn't going to work on android (don't know about iphone). Conversely, if you want something that will work with old versions of Internet Explorer, canvas may not work (not sure if ExCanvas supports IE6), but SVG does to some extent (Raphael supports IE6).

有几件事需要决定——你想让你的东西在移动浏览器中工作吗？SVG (Raphael) 不适用于 android（不知道 iphone）。相反，如果您想要一些可以与旧版本 Internet Explorer 一起使用的东西，canvas 可能无法使用（不确定 ExCanvas 是否支持 IE6），但 SVG 在某种程度上可以（Raphael 支持 IE6）。

Also, are you just doing animations/drawing, or are you doing a full blown app that might need things like buttons, sliders, tab containers, lists, grids, etc.

另外，你是在做动画/绘图，还是在做一个完整的应用程序，可能需要按钮、滑块、标签容器、列表、网格等。

If you are creating a complete app and you want it to work on mobile stuff too, you might check out the dojo toolkit, specifically dojox.gfx and other graphical dojox libraries: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/

如果您正在创建一个完整的应用程序并且您希望它也适用于移动设备，您可以查看 dojo 工具包，特别是 dojox.gfx 和其他图形 dojox 库：http: //archive.dojotoolkit.org/nightly/dojotoolkit/道琼斯/

dojox.gfx is a vector graphics library that supports several backends: canvas, SVG, even silverlight. Here's an article comparing it with raphael: http://www.lrbabe.com/?p=217

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

Check out also cake.js for a stand-alone scene graph library for the canvas: http://code.google.com/p/cakejs/And also check out processingjs.

另请查看 cake.js 以获取用于画布的独立场景图形库：http: //code.google.com/p/cakejs/并查看 processingjs。