6

问题：canvas 在以下情况下是否比 svg 更适合？

案例：我正在绘制一个与此类似的图表（使用 d3js 库）（但包含更多数据）：

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

它基于 svg，它适用于数千行（最多 5000 行），添加更多行（svg 路径）会显着降低性能（在页面中滚动变慢）

请记住：我需要添加鼠标事件（这在 svg 中很方便）

4

3 回答 3

6

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

使用鼠标事件可能会很痛苦canvas，因为您必须手动跟踪所有内容，因此使用 5000+ 点canvas不会很有趣。然而，权衡将是一旦绘制了点，假设您只在页面表现良好时才绘制它们，而不管行数如何，因为它们都被绘制到光栅图像而不是DOM.

老实说，虽然找到它的最好方法是测试你目前使用画布的东西。

于 2012-12-19T22:42:16.687 回答
3

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

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

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

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

于 2012-12-19T22:48:21.667 回答
2

对上面所说的一切+1。在 SVG 上使用画布和使用 DOM 合成图像时，我看到了一些惊人的性能提升。

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

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

于 2012-12-19T23:57:38.977 回答