大家能说说 Canvas, SVG, 和 WebGl.三者之间的区别哪里吗？

[meteor2013]

什么情况选择哪种技术呢？

[learnshare]

Canvas 是需要自己画点的白板；
SVG 是给数据就可以绘制点、线、图形的，基于 XML 的标记语言；
WebGL 是基于 Canvas 的 3D 框架。

Canvas 适用于位图，高数据量高绘制频率（帧率）的场景，如动画、游戏；
SVG 适用于矢量图，低数据量低绘制频率的场景，如图形、图表；
WebGL 主要用来做 3D 展示、动画、游戏。

[TTry]

canvas-位图
svg-矢量图
webgl-一套用3D画位图的api

[miniwoodman]

SVG只是一种矢量图形文件格式， 不仅现在的浏览器都支持，很多主流的系统也都支持。

Canvas 是HTML5新增的一个元素对象，名副其实就是一个画布，浏览器 js 配有相应的操作api，可以不再依赖其他的API或组件而直接绘图，相当于2D的API。

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支持的范畴。

WebGL 也继承 OpenGL ES 2.0 的兼容性支持能力， 在不同的设备上做有限的支持，需要运行时查询。

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

[w88975]

楼上说的很详细了,那我就说一些用途吧.

svg矢量图,可以代替一些图片,多用于图标,以及图表上,优势在于拥有HTML的event事件,交互起来很方便.

canvas一般用于绘制比较复杂的动画,做游戏之类的,由于canvas是HTML5带的,所以不支持低版本浏览器,特别是IE,canvas只是一个画布,绘制上去的东西,例如图片,都是转换成像素点绘制上去的,所以没有event事件,如果需要添加交互事件,需要自己手动计算绘制的对象所在坐标以及层级,还好这部分有第三方库.基本上除了HTML5游戏,一些酷炫的动画,正常的网页交互很少用到.

WebGL 从名字上看就知道和OpenGL很像,暂且看作能在浏览器上运行的OpenGL吧,WebGL的HTML节点名称用的也是canvas,但是他的渲染则和canvas不同,他可以支持硬件加速,支持3D,可用于3D游戏的开发,目前很少有3D的HTML5游戏,现在你能看到很多酷炫的图形交互的3D图表,大多用WebGL来渲染的.

[w88975]

svg和canvas的效率方面
渲染同一个对象,分辨率越大,canvas效率越低.
节点越多,svg效率越低

[FrankFang128]

小马过河

[codevoyager]

........今天阿里简历评估面试刚问，webgl 完全答错了。oh，shit