标签：概念 适用于 低版本 3d游戏 event 基础 html5游戏 游戏 api
概要：
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 展示、动画、游戏。
标签：概念 适用于 低版本 3d游戏 event 基础 html5游戏 游戏 api
原文地址：https://www.cnblogs.com/hustshu/p/14626539.html
