2009-09-17 66 views
14

我在互联网上发现了一个甚至可以与IE6一起使用的矢量库!哪个更好?为什么? RaphaelJS或HTML5画布?

http://raphaeljs.com/index.html

这是惊人的。

现在我的问题是否比即将推出的HTML5 <canvas>更好?我问的唯一原因是微软实施<canvas>可能需要几年的时间,而不需要插件来运行它。

直到互联网上的所有IE用户摆脱他们的旧浏览器,这样我们甚至可以证明使用HTML5 <canvas>会更长。

我一直都在坚持标准,但由于MS浏览器的开发速度缓慢,这个过程需要很长的时间。

想法?

+0

你不参与项目,是吗?这听起来像一个Rah! RAH!帖子,而不是问题。 – 2009-09-17 21:35:35

+0

@ T.J。不,我只是在互联网上找到它。而且我一直非常沮丧地等待IE浏览器赶上所有其他浏览器。 – leeand00 2009-09-17 21:37:43

回答

20

Raphael是一个使用SVG完成的矢量图形库,而HTML5 canvas是位图图形。

如果你想做矢量图形,我认为与拉斐尔一起可能是一个不错的选择,而不是“正义”画布。就像你说的那样,画布并不适合IE浏览器,它可能需要一段时间才能获得本地支持。如果拉斐尔做你需要的,没有特别的理由不使用它。

请注意,这里还有其他一些库:Excanvas,它使用VML模拟IE浏览器的画布(据我所知),还有一些与Silverlight和Flash相同但我忘记了它们名字的其他库。

还有一个Dojo,它有一个用于抽象画布使用的组件,在一个易于使用的界面后面,它也支持IE。

在所有浏览器中使用本地画布不会使库过时,因为库通常将一些画布复杂性抽象出来,使用起来更容易。

+5

性能是最大的区别。如果有很多节点要绘制,SVG会变慢很多。这是SVG工作原理的一个固有结果。 HTML5画布的性能主要取决于需要重绘的像素总量(宽x高)。 – Jacco 2011-07-04 09:44:04

+0

@Jacco - 伟大的一点 - 如果你试图为很多东西制作动画(如星球场),事情真的开始与SVG结结巴巴 - 画布可以更好地处理它。 – 2012-10-09 21:09:44

5

谷歌SVGWeb(http://code.google.com/p/svgweb/)是你想要的。它使IE与标准SVG兼容,并且所有其他主流浏览器已经支持该标准。换句话说,正如谷歌所说,“使用库和本地SVG支持,您可以立即将目标安装到现有已安装的Web基础的95%左右。”

5

而且您可以使用在IE中实现HTML5 Canvas标准的http://code.google.com/p/explorercanvas/。你要做的就是添加:

<head> 
<!--[if IE]><script src="excanvas.js"></script><![endif]--> 
</head> 

Canvas和SVG之间的差异说明如下:

SVG和画布是不是真的 互换技术。 SVG是 保留模式图形的类型,其中 所有内容均来自于抽象模型(SVG文档)的抽象模型 。 画布另一方面是一种 直接模式图形,其中 是没有模型和客户端 (JavaScript)必须照顾 重绘,动画等。

4

答案取决于你所需要的:

  • ,如果你需要添加事件处理程序中的图形对象:您需要使用SVG。其他画布。

  • ,如果不需要的事件是性能非常重要:如果是,那么帆布5.

注意,IE 9支持Canvas和提供了更多的HTML 5的支持比其他浏览器!

+1

事件可以在HTML5画布中轻松处理。 – Jacco 2011-07-04 09:40:59

+0

画布本身将响应点击事件;不过,您需要手动跟踪对象位置。像[KineticJS](http://www.kineticjs.com/)这样的图书馆可以帮助解决这个问题,并且使Canvas和Raphael一样易于使用。 – btown 2012-06-06 19:11:44

0

正在寻找“raphael vs canvas”这里的帖子是5岁。从那以后有什么事情要做?拉斐尔obsolet?