我想开始一个项目，在该项目中，我需要绘制由用线条连接的圆角矩形组成的图表，以及单击某些元素时的 JavaScript 操作。这需要在所有现代浏览器中工作。
SVG 和 HTML5 Canvas 似乎都可以做到这一点，所以我想知道什么是最好的。
另外，我不想重新发明轮子，所以如果有库可以做这样的事情，我想知道；我查看了 Raphaël 和其他一些 JavaScript 绘图库，但它们没有提供我需要的所有功能。 Google的API中有这样一个工具，但是非常有限。
使用 SVG 因为——作为保留模式绘图 API — 您可以将事件侦听器直接附加到特定元素，并更改特定元素的属性并使页面神奇地更新。此外，作为基于矢量的格式，它与分辨率无关。
相比之下，HTML5 Canvas 是non-retained-mode (aka 立即模式) 绘图API；您绘制的每个像素都与画布上的所有其他像素混合，没有原始形状的概念。此外，作为基于光栅的格式，您需要做一些额外的工作才能使绘图命令适应不同的显示尺寸。
一般来说，当且仅当您需要时，您才应该使用 Canvas：
- 直接设置像素（例如模糊、闪光效果），或
- 直接获取像素（例如读取用户的绘图以另存为 PNG，对图像的部分进行采样以检测视觉重叠 http://phrogz.net/tmp/canvas_shape_edge_arrows.html), or
-
massive不会移动太多或跟踪单个事件的“对象”数量（SVG 重绘数千个对象可能会很慢）。
另请注意，您不必只选择其中之一。您可以将 SVG 绘制到画布上。您可以在 SVG 中包含位图（图像）。您甚至可以通过以下方式在 SVG 中包含 HTML5 Canvas<foreignElement>。您可以拥有一个包含多个分层画布和具有透明背景的 SVG 元素的 HTML 页面，并混合每个元素的输出。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
