HTML5 SVG vs.画布的行数多？

Question

问:在以下情况下，canvas是否比svg更适合？

案例:我正在绘制一个图表(使用d3js库)，类似于这个图表(但包含更多的数据)：

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

它是基于svg的，它适用于数千行(最多5000行)，添加更多行(svg路径)会显著降低性能(在页面中滚动变得缓慢)

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

Answer 1

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

使用canvas的鼠标事件可能会很痛苦，因为你必须手动跟踪所有事情，所以使用canvas的5000+ points将不会很有趣。然而，权衡的是一旦绘制了点，假设您只绘制一次它们，页面将表现良好，无论有多少条线，因为它们都绘制到光栅图像，而不是DOM的一部分。

不过，老实说，找到它的最好方法是使用canvas测试您当前拥有的内容。

Answer 2

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

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

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

另一种选择是使用hit regions。这些必须定义为多边形路径。

Answer 3

上面所说的每件事都加1。在使用canvas over SVG和使用DOM合成图像时，我看到了一些惊人的性能提升。

关于使用鼠标事件操作画布图像，我认为对于您所描述的图像，最好的方法是使用如下所示的库将其抽象出来：

• http://paperjs.org
• http://kineticjs.com
• http://www.createjs.com/#!/EaselJS

让你的代码远离画布本身，让一个库来为你思考。