canvas/svgwebgl

特点：

Canvas（位图） 是高数据量高绘制频率（帧率）的场景，如动画、游戏； 

SVG（矢量图） 是低数据量低绘制频率的场景，给数据就可以绘制点、线、图形的，基于 XML 的标记语言； 

WebGL（位图） 是基于 Canvas 的 3D 框架。 如动画游戏等

 

详细分析：

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规范的细节。

 

svg和canvas的效率方面：

1.渲染同一个对象,分辨率越大,canvas效率越低. 
2.节点越多,svg效率越低

 

转载于:https://www.cnblogs.com/YoungYou/p/9004757.html