H5数据可视化：Canvas和SVG

概述

Canvas 和 SVG 是HTML5支持的两种数据可视化（Data Visualization）技术。基于这两种技术，诞生了很多可视化工具。

Canvas通过JavaScript来绘制2D图形。Canvas是逐像素进行渲染的。在Canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
SVG(Scalable Vector Graphics，可伸缩矢量图形)使用XML文档描述来绘制2D图形，这意味着SVG DOM中的每个元素都是可用的。您可以为某个元素附加JavaScript事件处理器。在SVG中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

比较

Canvas和SVG都允许在浏览器中创建图形，但是它们在根本上是不同的，各有强项和弱点。

Canvas适用场景
     Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制。
SVG适用场景
     SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景。

示例

(1) 使用SVG画圆

效果如下：

(2) 使用Cavas画矩形

    
        
Your browser does not support the canvas element!
   
    

效果如下：

开源库

目前有很多开源可视化JS库，目前应用比较广泛的库有，

D3.js (Data-Driven Documents ，数据驱动文档；基于SVG )
https://d3js.org/
ECharts （基于Canvas）
http://echarts.baidu.com/

其他

无论Canvas还是SVG都不能绘制3D图形。而webGL 可基于JavaScript实现3D绘图，浏览器无需插件支持，Web开发者直接使用js调用相关API就能借助系统显卡（GPU）进行编写代码从而呈现3D场景和对象。