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文档再用谷歌浏览器打开就能看到效果了:

    <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时我们通常也是使用类库来提升效率。这里的类库主要有三种:

    • 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更简陋,简直除了控制台再没有别的了。我想这是制作它的统计学家的心声:科学不是花里胡哨的玩意,它其实很枯燥,但很注重内在美!


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页