logo标签列表

哪个更好，RaphaelJS还是HTML5 Canvas？为什么？

javascriptvectorhtmlvector-graphics
14

我在网上发现了一个向量库，甚至可以在IE6上使用！

http://raphaeljs.com/index.html

这太神奇了。

现在我的问题是，它比即将发布的HTML5 <canvas>更好吗？原因只是因为可能需要几年时间，微软才会实现不需要插件就能运行的<canvas>。

而且，要等到所有互联网上的IE用户都摆脱他们的旧浏览器，我们才能有充分的理由使用HTML5 <canvas>。

我非常支持遵循标准，但是由于微软浏览器的开发缓慢，这个标准需要太长时间才能得到普及。

你怎么看？

你不会以某种方式参与这个项目，对吧？这听起来像是一篇兴奋的帖子，而不是一个问题。 - T.J. Crowder
@T.J. 不，我只是在互联网上找到了它。而且我一直对等待IE跟上其他浏览器感到非常沮丧。 - leeand00
4个回答
20

Raphael是一个使用SVG制作的矢量图形库，而HTML5 canvas是位图形式的。

如果您想进行矢量图形设计，我认为选择Raphael比仅使用canvas可能更好。正如您所说，canvas无法兼容IE，而且在它被本地支持之前可能需要一段时间。如果Raphael能够满足您的要求，那么没有特别的理由不使用它。

请注意还有其他的库：Excanvas使用VML（据我所知）模拟IE中的canvas，还有一些使用Silverlight和Flash做同样事情的库，但我忘记了它们的名字。

还有Dojo，它有一个组件可以抽象出易于使用的界面，用于canvas的使用，同时也支持IE。

即使所有浏览器都具有本地canvas功能，这些库也不会过时，因为这些库通常会抽象出一些canvas的复杂性，使其更易于使用。

5
性能是其中的大差异。如果要绘制很多节点，SVG 的速度会明显下降，这是 SVG 工作方式的固有结果。HTML5 Canvas 的性能主要取决于需要重新绘制的像素总数（宽 x 高）。 - Jacco
@Jacco - 很好的观点 - 如果你尝试动画化很多东西（例如星空），SVG真的会开始出现卡顿 - Canvas可以更好地处理它。 - Peter Ajtai
5
您可以使用http://code.google.com/p/explorercanvas/在IE中实现HTML5 Canvas标准。您所需做的就是添加以下内容：

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

Canvas和SVG之间的区别如下所述：
SVG和Canvas并不是可以互换的技术。SVG是一种保留模式图形，其中所有内容都是从一个相当抽象的模型（即SVG文档）绘制出来的。而Canvas则是一种立即模式图形，其中没有模型，客户端（JavaScript）必须负责重新绘制、动画等等。
5

谷歌的SVGWeb (http://code.google.com/p/svgweb/) 可以帮助你。它可以让IE支持标准SVG，其他主流浏览器已经支持了这个标准。换句话说，正如谷歌所说，“使用该库和本地SVG支持，您可以立即针对现有网络基础设施的大约95%进行目标定位。”

4
答案取决于您的需求：

  • 如果您需要向图形对象添加事件处理程序：您需要使用SVG。否则使用Canvas。

  • 如果不需要事件，性能很重要：如果是，则使用Canvas 5。

请注意，IE 9支持Canvas并提供比其他浏览器更多的HTML 5支持！

1
在HTML5 Canvas中同样可以轻松处理事件。 - Jacco
画布本身将响应点击事件；但您需要手动跟踪对象位置。不过，像KineticJS这样的库可以帮助您完成此操作，并使Canvas与Raphael一样易于使用。 - btown
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接