canvas webGL SVG 比较

最新推荐文章于 2023-11-26 22:24:54 发布

NRlovestudy

最新推荐文章于 2023-11-26 22:24:54 发布

阅读量520

点赞数 1

分类专栏：数据可视化 javascript 前端

javascript 同时被 3 个专栏收录

116 篇文章 0 订阅

订阅专栏

前端

105 篇文章 0 订阅

订阅专栏

数据可视化

4 篇文章 0 订阅

订阅专栏

https://blog.csdn.net/Thea12138/article/details/79723380

对每个类型的封装库：https://blog.csdn.net/u010513603/article/details/80351569

实际使用：https://www.cnblogs.com/best/p/6107565.html

概要：

Canvas 位图，是需要自己画点的白板；

WebGL 3D位图，基于 Canvas 和 OpenGL ES 2.0 的 3D 框架——Canvas 的3D版本。

OpenGL（基于C++的）入门：https://www.jianshu.com/p/d83a519ae2d0

http://www.cnblogs.com/android-blogs/p/5454698.html

WebGL 入门：https://www.cnblogs.com/bsman/p/6128447.html

SVG 矢量图，是给数据就可以绘制点、线、图形的，基于 XML 的标记语言；

对每个类型的封装库：

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类库。在前文中已经有过推介。