7

我想开始一个项目，我需要在单击某些元素时绘制由与线条连接的圆角矩形和 JavaScript 动作组成的图表。这需要在所有现代浏览器中工作。

SVG 和 HTML5 Canvas 似乎都能够做到这一点，所以我想知道什么是最好的。

我也不想重新发明轮子，所以如果有图书馆可以做这些事情，我想知道；我查看了 Raphaël 和其他一些 JavaScript 绘图库，但它们并没有提供我需要的所有功能。在 Google 的 API 中有这样的工具，但是非常有限。

4

1 回答 1

16

使用 SVG 是因为 — 作为保留模式绘图 API — 您可以将事件侦听器直接附加到特定元素，并更改特定元素的属性并神奇地更新页面。此外，作为基于矢量的格式，它与分辨率无关。

相比之下，HTML5 Canvas 是一个non-retained-mode（又名即时模式）绘图 API；您绘制的每个像素都与画布上的所有其他像素混合，没有原始形状的概念。此外，作为基于光栅的格式，您需要做一些额外的工作才能让绘图命令针对不同的显示尺寸进行调整。

一般来说，当且仅当您需要时，您应该使用 Canvas：

  1. 直接设置像素（例如模糊、闪光效果），或
  2. 直接获取像素（例如读取用户的绘图以保存为 PNG，对图像的部分进行采样以检测视觉重叠），或
  3. 大量不会移动或跟踪单个事件的“对象”（SVG 重绘数千个对象可能会很慢）。

另请注意，您不必只选择其中一个。您可以在画布上绘制 SVG。您可以在 SVG 中包含位图（图像）。您甚至可以通过<foreignElement>. 您可以拥有一个带有多个分层画布和具有透明背景的 SVG 元素的 HTML 页面，将每个页面的输出混合在一起。

于 2012-04-25T18:50:09.357 回答