对每个类型的封装库：

1、canvas

HTML5 canvas也有相应的JS库。我用过并感觉不错的有如下一些：

flot, 我第一个使用的canvas库。基于jquery，支持有限的视觉形式（折线、条形、面积、点）和缩放等动画效果，简单易用。
RGraph，我第二个使用的canvas库。有优秀的动画效果，特点是有大量的传统统计图的例子，并且很容易对这些例子做定制。
chartJS, 该库将很多基本统计图的实现方法封装起来，只要通过简单调用即可以实现。这货的优点就是简单易用，不过如果要做深度定制恐怕还不太够用。
kineticJS, 是近来来canvas类库中的新秀。这个库的优点是在处理大量对象的时候很快，因为使用了多canvas技术。在它的官网上甚至能找到很多类似与flash动画的例子。另外它的教程不错。考虑到其他库很多时候依赖例子定制，而这个文档写的好对于自主设计更有效，可能是目前最强的库。
porcessingJS, 它是著名的Processing语言的一个接口，用processing的语法以canvas进行绘图，之后讲processing的时候还会讲到。优点是自由度大，缺点是没有预定义模版，你可能需要到处找一些例子来学习。

Echart, 一个由百度前端发起的canvas国产类库。这个echart其实是在canvas类库zrender的基础上做的主题图库，优点有数据驱动，图例丰富，功能强大，支持数据拖拽重计算，数据区域漫游，全中文文档非常过瘾。跟同样是国产的前端脚手架fis一样（官网http://fis.baidu.com/），都是诚意满满的国产套餐，体现了现今国内不俗的前端开发实力。我试用后感觉非常好，在我参与的一些项目中直接采用。关于我使用经验参见：百度数据可视化图表套件echart实战
最后再说说canvas这个技术本身的优缺点：
缺点：
- 只能绘制2D图像，暂时不支持3D图像。
- canvas绘制图形出并非可以直接操作的dom对象。如果要对其进行类似dom的操作，例如添加属性等等，比较麻烦（这就是为什么必须使用类库）。
优点：
- 由于canvas绘图不会给每个点生成对象，所以绘制速度快，消耗内存少。（这点主要是相对于SVG，VML技术而言）
- 兼容性较好。除了IE6，其他浏览器都可以支持。（IE7，8需要载入扩展JS，终究还是能用的）

2、webGL

前面说的绘图技术，无论canvas还是SVG都不能绘制3D图形。我曾经见过很多在网页上显示3d图形的方案，但都需要你的电脑上安装相应的插件（例如flash， silverlight）或者事先安装虚拟机(例如java）。之前曾经有过很多web 3D渲染技术，但不是要下插件，就是编程复杂，于是渐渐被时代淘汰，例如VRML，约翰•卡马克已经宣布了它的死亡。难道就没有一个开源的通用标准显示3D图形吗？

当然是有的。这货叫webGL, 是一项使用JavaScript实现3D绘图的技术，浏览器无需插件支持，Web开发者直接使用js调用相关API就能借助系统显卡（GPU）进行编写代码从而呈现3D场景和对象。

WebGL标准由科纳斯组织（Khronos Group）开发和维护，Google、Mozilla、Opera和Apple 等浏览器厂商都是其中的成员，为这一标准做出了显著贡献。从名称上我们就可以知道WebGL跟openGL肯定是小弟与大哥的关系。事实上webGL是基于OpenGL ES 2.0开发的，OpenGL ES 是 OpenGL 三维图形 API 的子集，针对手机、平板电脑和游戏主机等嵌入式设备而设计。浏览器内核通过对OpenGL API的封装，实现了通过JavaScript调用3D的能力。WebGL 内容作为 HTML5 中的Canvas标签的特殊上下文实现在浏览器中（这下canvas终于可以画3D图了，虽然用的是不同技术）。

webGL的各大浏览器支持情况（截至2013年11月）：

桌面浏览器

Mozilla Firefox 4+
Google Chrome 8+
Internet Explorer 11+
Safari 5.1+
Opera 12+

移动浏览器

Firefox 25+
Google Chrome 31+
Opera Mobile 12+
Android Browser 暂不支持
iOS Safari暂不支持
IE Mobile 暂不支持

从上面的支持情况列表我们可以发现，支持情况还是比较可喜的，至少现代浏览器都支持，移动端和IE略有落后。不过毕竟这个技术还是新鲜事物，在国内能找到的资料还很少，国内前端技术圈讨论也不多，是真正的技术蓝海。本人并没有实际开发过webGL程序，目前还停留在观察阶段。若有工作需求，会将其列入研究重点。

让我们查看一些webGL的案例，当然是mozilla demostudio的最好。

最后，让我们提一提webGL的JS框架，它们可以减少工作量并提供一些有趣的例子。

philoGL，专注于3D可视化的一个webGL框架。
threee.js, 谷歌团队Data Arts出品的基于webGL的3D场景库，它的演示十分有趣

3、SVG

SVG最大的优点就是绘制和控制简单。直接在html页面里加入xml语句就可以编辑绘制。例如下面的代码就是画一个圆、一个椭圆和一道黑线，把这段代码另存为一个html文档再用谷歌浏览器打开就能看到效果了：
```
<html>
<svg><circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2" /><ellipse cx="250" cy="250" rx="100" ry="200" fill="yellow"/><line x1="0" y1="0" x2="500" y2="50" stroke="black"/>
</svg>
</html>
```
跟前文中canvas绘图的方式比一比，就知道SVG是多么容易控制了。

当然，使用SVG时我们通常也是使用类库来提升效率。这里的类库主要有三种：

D3的全称是Data-Driven Documents(数据驱动文档)，在github上关注数量超过了2万人（超过了所有canvas类库的关注数量），是非常受欢迎的开源工具。使用d3的有开发者，有设计师，有艺术家，资料非常丰富（虽然中文的很少）。关于D3的我的应用案例可以见我之前的文章《D3js初探及数据可视化案例设计实战》。
- highcharts.JS, 在现代浏览器中使用SVG绘图，在IE6，7，8中用VML绘图。包含一堆预定义的图表和样式。唯一的问题是，这货收费。只对非商业用途免费。
- raphael.js，以著名画家拉斐尔之名命名的绘图JS库，跟highcharts类似，也是SVG + VML兼容性方案。但它是开源的，应用也比较广泛。使用它的时候有必要再下一个gRaphael图表库作为参考。
- D3.js，D3js是应用在web开发上的开源JS组件库，是一个数据可视化工具。D3应用的最为广泛，不过只支持SVG，我会重点讲述。
那么接着说说D3的优缺点（基本上也就是SVG的优缺点）：

优点：

缺点；
- D3最大的优点在于其资料丰富，案例非常多。这是真的是一个极大的优点。
- SVG矢量图形的特点是无损缩放，这个优势在显示2D图形式会有非常好的效果，并且兼容各种分辨率。
- SVG图形的节点可以像dom元素一样控制，这就让自主创作图形变得更容易。相对于canvas这也是非常大的优势。
- SVG是2D矢量图，不能画3D图形。（用2D矢量可以画很多带透视效果的伪3D图，那并不是真正的3D图！）
- d3.不支持IE6，7，8。如果想要IE8使用d3，请用r2d3.js（一个结合了 Raphael.js的扩展库）。Raphael.js是一个跨浏览器的矢量图形库，它实现IE6，7，8兼容的方法是：在IE6，7，8中使用VML，在其他浏览器中使用SVG。另外，如果图形复杂，就不要指望用Raphael.js在IE上能跟D3画出一样酷炫的效果。
- SVG的节点都是对象，非常占用内存。例如论坛里一个朋友使用d3绘制超过12000个节点的图，直接导致每个试图打开它的浏览器都崩溃了。这个时候如果不愿意做简化那么应该试试canvas绘图。

其他工具：

4.java & processing

processing是久负盛名的为了实现交互式可视化创作的Java语言扩展，我在《Benjamin Fry的《可视化数据》和processing语言》一文中有过介绍。不过我并没有直接用过processing，而只用过processingJS, 一个使用processing语法的使用html5 canvas绘图的JS类库。在前文中已经有过推介。

5. R

R语言之前我已经多次提到了。这段时间我也开始试用，不过说句实话这个东西我觉得不能称为语言，我感觉它不像C++，更像mathlab这样的应用程序。它的图标很简陋，GUI更简陋，简直除了控制台再没有别的了。我想这是制作它的统计学家的心声：科学不是花里胡哨的玩意，它其实很枯燥，但很注重内在美！

canvas webGL SVG 比较相关推荐

WebGL、canvas、svg
文章目录 WebGL.canvas.svg 面试题 canvas 面试题 canvas位图和svg矢量图的区别 canvas的绘图原理 canvas.style.width和canvas.width区 ...
HTML5 Canvas vs. SVG vs. div
本文翻译自:HTML5 Canvas vs. SVG vs. div What is the best approach for creating elements on the fly and be ...
前端4-2-10：Canvas与SVG之简介、对比总结
目录 [先言] [题外话] [问题] 1.定义关于SVG(详见什么是SVG) 关于Canvas 2.两者区别 Canvas SVG 对比列表 3.历史 4.功能 5.技术 [先言] [题外话] 本来 ...
Canvas VS . SVG
SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 SV ...
HTML5 Canvas、内联 SVG、Canvas vs. SVG
canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...
080_html5 Canvas和SVG
1. Canvas和SVG都允许您在浏览器中创建图形, 但是它们在根本上是不同的. 2. SVG 2.1. SVG是一种使用XML描述2D图形的语言. 2.2. SVG基于XML, 这意味着SVG D ...
H5中canvas和svg绘图方式介绍
在HTML5中包括了两种绘图方式,canvas和svg(矢量呈现),而与canvas不同的是,svg是一种XML标记语言,它既可以单独保存以".svg"为后缀的文件在浏览器中打开显 ...
Canvas or SVG？一张好图，两手准备，就在 ECharts 4.0
Canvas 和 SVG 是两大基于浏览器的渲染方案,在选择图表库的时候,用户有时也会在这两者之间纠结.但是纠结的时候,你是否真的明白这两者在哪些方面有优劣? ECharts 4.0 推出 Canva ...
微信小游戏 - Canvas/WebGL Demo 移植
这是个人关于微信小游戏系列文章的第一篇,在这系列文章里会描述 -- 如何把一些 Canvas/WebGL Demo 移植到小游戏环境并支持双端运行: 对小游戏在 Android 平台的运行时架构进行分 ...

canvas webGL SVG 比较