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

时间:2021-04-08 13:12:51   收藏:0   阅读:0

概要:

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 展示、动画、游戏。

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!