对于大量的行,HTML5 SVG vs Canvas？

Question

问题:在下列情况下,画布是否比svg更合适？

案例:我正在绘制一个与此类似的图表(使用d3js库)(但有更多数据):

http://mbostock.github.com/d3/talk/20111116/iris-parallel.html

它基于一个svg,它适用于几千行(最多5000行),添加更多行(svg路径)会显着降低性能(页面滚动变慢)

请记住:我需要添加鼠标事件(在svg中很方便)

Answer 1

通常svg更适合矢量图像,如您的示例.但是canvas在现代浏览器中有很多好处,比如硬件加速,所以对于绘制线条,只要缩放,平移等.不需要性能将使用canvas.

鼠标事件可能是一种痛苦的使用canvas,因为你必须手动跟踪所有内容,所以用5000+点使用canvas它不会很有趣.然而,折扣将是一旦绘制点,假设您只有在页面表现良好时才绘制它们而不管行数,因为它们都被绘制为光栅图像而不是图像的一部分DOM.

老实说,找到它的最好方法是使用canvas测试你现在拥有的东西.

Answer 2

当性能成为问题时，切换到画布可能是一种选择。在这种情况下，您可以绘制一次画布。之后它几乎被当作图像来对待。绘图可能需要一些时间，但之后可以很快缩放。请注意，可以使用 context.drawImage 方法将渲染的 SVG 绘制到画布上（示例）。因此，您可以保留 SVG 生成代码以在后台创建 SVG，然后将其绘制到画布上。

但请记住，一旦在画布上，它就不会像 SVG 那样漂亮地缩放。当用户放大时，它会变得模糊或像素化，具体取决于浏览器缩放图形的方式。

画布上的点击事件可以通过两种方式处理。要么保留一个点击目标数组，然后向画布添加一个 onclick 事件处理程序。当发生单击时，迭代数组并检查哪一个最接近单击坐标。

另一种选择是使用命中区域。这些必须被定义为多边形路径。