SVG与HTML5 Canvas中的图表

Question

我想开始一个项目,我需要绘制图表,包括用线条连接的圆角矩形和点击某些元素时的JavaScript动作.这需要适用于所有现代浏览器.

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

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

Answer 1

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

相比之下,HTML5 Canvas是一种non-retained-mode(又名立即模式)绘图API; 您绘制的每个像素都与画布上的所有其他像素混合,没有原始形状的概念.此外,作为基于栅格的格式,您需要做一些额外的工作来使绘图命令针对不同的显示尺寸进行调整.

通常,当且仅当您需要时,才应使用Canvas:

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

另请注意,您不必只选择其中一个.您可以将SVG绘制到画布上.您可以在SVG中包含位图(图像).您甚至可以在SVG中包含HTML5 Canvas <foreignElement>.您可以拥有一个包含多个分层画布的单个HTML页面和具有透明背景的SVG元素,并将每个元素的输出混合在一起.