我想开始一个项目，我需要绘制由用线连接的圆角矩形和单击某些元素时的 JavaScript Action 组成的图表。这需要适用于所有现代浏览器。
SVG 和 HTML5 Canvas 似乎都可以做到这一点，所以我想知道哪个最好。
我也不想重新发明轮子，所以如果有图书馆做这样的事情我想知道；我查看了 Raphaël 和其他一些 JavaScript 绘图库，但它们并没有提供我需要的所有功能。在 Google 的 API 中有这样的工具，但它非常有限。
最佳答案
使用 SVG 是因为——作为一种保留模式绘图 API——您可以将事件监听器直接附加到特定元素，并更改特定元素的属性并让页面神奇地更新。此外，作为一种基于矢量的格式，它与分辨率无关。
相比之下，HTML5 Canvas 是一个 non-retained-mode (又名 立即模式)绘图 API；您绘制的每个像素都与 Canvas 上的所有其他像素混合，没有原始形状的概念。此外，作为基于光栅的格式，您需要做一些额外的工作来让绘图命令针对不同的显示尺寸进行调整。
一般来说，当且仅当您需要时才应该使用 Canvas:
- 直接设置像素(例如模糊、闪光效果)，或
- 直接获取像素(例如读取用户的绘图以另存为 PNG，sampling portions of the image to detect visual overlaps)，或
- 大量不会移动太多或跟踪单个事件的“对象”(SVG 重绘数千个对象可能很慢)。
另请注意，您不必只选择一个或另一个。您可以将 SVG 绘制到 Canvas 上。您可以在 SVG 中包含位图(图像)。您甚至可以通过 <foreignElement> 在 SVG 中包含 HTML5 Canvas .您可以拥有一个包含多层 Canvas 和具有透明背景的 SVG 元素的单个 HTML 页面，并将每个元素的输出混合在一起。
关于html - SVG 与 HTML5 Canvas 中的图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10321897/