Canvas & WebGL

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

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

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

Canvas（翻译为画布）是HTML5的一个标签，Canvas可以使用JavaScript在网页上绘制图像，例如下面的代码就使用Canvas绘制一个简单的矩形。

<canvas id="container" width="1280px" height="720px"></canvas>

const canvas = document.getElementById("container");
const context = canvas.getContext("2d");
context.fillStyle = "rgba(0, 0, 255, 1.0)";
context.fillRect(120, 10, 150, 150);

Canvas只支持一些简单的2d绘制，不支持3d，更重要的是性能有限，WebGL弥补了这两方便的不足。