canvas SVG webGL比较

https://blog.csdn.net/olevin/article/details/51296470

1canvas

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，终究还是能用的）
  2SVG

• SVG最大的优点就是绘制和控制简单。直接在html页面里加入xml语句就可以编辑绘制。例如下面的代码就是画一个圆、一个椭圆和一道黑线，把这段代码另存为一个html文档再用谷歌浏览器打开就能看到效果了：

  跟前文中canvas绘图的方式比一比，就知道SVG是多么容易控制了。

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

  • highcharts.JS, 在现代浏览器中使用SVG绘图，在IE6，7，8中用VML绘图。包含一堆预定义的图表和样式。唯一的问题是，这货收费。只对非商业用途免费。
  • raphael.js，以著名画家拉斐尔之名命名的绘图JS库，跟highcharts类似，也是SVG + VML兼容性方案。 但它是开源的，应用也比较广泛。使用它的时候有必要再下一个gRaphael图表库作为参考。
  • D3.js，D3js是应用在web开发上的开源JS组件库，是一个数据可视化工具。D3应用的最为广泛，不过只支持SVG，我会重点讲述。

   

  D3的全称是Data-Driven Documents(数据驱动文档)，在github上关注数量超过了2万人（超过了所有canvas类库的关注数量），是非常受欢迎的开源工具。使用d3的有开发者，有设计师，有艺术家，资料非常丰富（虽然中文的很少）。关于D3的我的应用案例可以见我之前的文章《D3js初探及数据可视化案例设计实战》。

  
  

• 那么接着说说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绘图。
  
  

3. 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场景库，它的演示十分有趣。

5.java & processing

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

6. R

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