Canvas、 SVG 和 WebGl三者之间的区别

概要：

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

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

WebGL 3D位图，是基于 Canvas 的 3D 框架。

说明：

SVG只是一种矢量图形文件格式，不仅现在的浏览器都支持，很多主流的系统也都支持。可以代替一些图片,多用于图标,以及图表上,优势在于拥有HTML的event事件,交互起来很方便。

Canvas 是HTML5新增的一个元素对象，名副其实就是一个画布，浏览器 js 配有相应的操作api，可以不再依赖其他的API或组件而直接绘图，相当于2D的API。一般用于绘制比较复杂的动画,做游戏之类的,由于canvas是HTML5带的,所以不支持低版本浏览器,特别是IE,canvas只是一个画布,绘制上去的东西,例如图片,都是转换成像素点绘制上去的,所以没有event事件,如果需要添加交互事件,需要自己手动计算绘制的对象所在坐标以及层级,还好这部分有第三方库。基本上除了HTML5游戏,一些酷炫的动画,正常的网页交互很少用到.

WebGL 是以 OpenGL ES 2.0 为基础的一套浏览器 3D图形API （HTML5），在编程概念上与OpenGL ES 2.0 几乎是完全通用的，同样采用可编程渲染管线，也就是每个顶点的处理受到一小段Vertex Shader代码的控制，每个像素的绘制过程也受到一小段Fragment Shader代码的控制。WebGL主要是3D为主，不过2D的绘图要求也可以变通来实现。 WebGL 无论如何都需要一个显示对象来呈现，这个对象就是 Canvas，仅此而已，WebGL不对Canvas有任何附加的操作API，那部分属于浏览器js支持的范畴。可看作能在浏览器上运行的OpenGL,WebGL的HTML节点名称用的也是canvas,但是他的渲染则和canvas不同,他可以支持硬件加速,支持3D,可用于3D游戏的开发,目前很少有3D的HTML5游戏,现在你能看到很多酷炫的图形交互的3D图表,大多用WebGL来渲染的。 WebGL 也继承 OpenGL ES 2.0 的兼容性支持能力，在不同的设备上做有限的支持，需要运行时查询。

Three.js、Babylon.js、Blender4Web等是几种知名的 WebGL 开发框架，对 WebGL 基础操作做了大量的封装，可以拿来就用，即使不了解 WebGL规范的细节。

用途：

Canvas 适用于位图，高数据量高绘制频率（帧率）的场景，如动画、游戏；
SVG 适用于矢量图，低数据量低绘制频率的场景，如图形、图表；

WebGL 主要用来做 3D 展示、动画、游戏。

Canvas、 SVG 和 WebGl三者之间的区别相关推荐

[转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别
要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM ...
TCP三次握手、四次挥手、socket，tcp，http三者之间的区别和原理
接着上一篇文章叙述: TCP/IP连接(在互联网的通信中,永远是客户端主动连接到服务端): 手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接.TCP协 ...
String String.valueof() toString三者之间的区别~
String String.valueof() toString三者之间的区别~ (String )强制类型转换,使用这种方法时,需要注意的是类型必须能转成String类型.因此最好用instan ...
String StringBuilder StringBuffer三者之间的区别~~~
String StringBuilder StringBuffer三者之间的区别~~~ String是字符串常量,它是典型的immutable类,被声明final class,所有的属性都是fina ...
Python id(obj), ==, is 三者之间的区别
不多说,直接上代码,看看三者的区别吧. 代码: # 例子 a = [1, 2, 3] b=a; print(a) print(b) print(a is b) print(b is a) print( ...
.NET、C#和ASP.NET三者之间的区别与联系
.NET.C#和ASP.NET三者之间的区别与联系 1..net(dot net) .net是一个平台,抽象的平台概念. 实现形式是库:①定义了基本的类型(通用类型系统CTS,common type ...
【待续】C#.Net 关键词清理 Fields Property Attribute Const三者之间的区别与联系
C#.Net 关键词清理 Fields Property Attribute 三者之间的区别与联系不少人一直对这三个词容易混淆视听,不知道他们之间到底什么联系. 这可能跟翻译的中文有很大的关系. 首 ...
keydown,keypress,keyup三者之间的区别：
最近看了Javascript高级教程中对过滤输入的介绍,想实现比如电话号码中不能包好非数值的字符,而相应文本中插入字符的操作是keypress事件,所以就想通过阻止这个事件的默认事件行为来阻止这个事件 ...
光端机、光纤收发器与光猫三者之间的区别介绍
现如今,在当下的网络通信项目中,光端机.光纤收发器.光猫这几款产品可以说是应用非常广泛,也是备受安防人的推崇,那么,对于这三者之间的区别你是否清楚呢?接下来就由飞畅科技的小编来为大家详细介绍下光端机. ...

Canvas、 SVG 和 WebGl三者之间的区别

Canvas、 SVG 和 WebGl三者之间的区别相关推荐

最新文章

热门文章