Canvas 、WebGL 、SVG和Three.js

如果你第一次接触WebGL、Canvas等概念，可能不知道它们都是什么，所以下面会对这几个常说的概念的进行简单的解释。但是如果想真理解这几个概念，你还需要分别找一个对应代码案例测试体验下，如果只看文字，会比较抽象，无法深入理解。

• SVG 教程
• Canvas教程
• WebGL入门教程
• Three.js入门教程

SVG

svg是一套二维绘制标准，通过一个标签或者说元素来绘制一个图形，如果你有前端基础相比你能理解标签或元素的概念，比如div元素。不过场景的HTML元素，不是用来绘图而已，svg的标签可以用来绘制二维图形。

• 矩形
• 圆形
• 折线
• 多边形
• 路径
• 椭圆
• 直线

Canvas

canvas和div一样是HTML标准的一个元素，只不过canvas具有绘图功能，而div基本不具有。

<canvas id="webgl" width="500" height="500" style="background-color: blue">canvas>

通过canvas的getContext方法返回一个上下文ctx对象，ctx对象具有一系列绘图API，这些API都可以使用使用JavaScript语言通过ctx来调用，这要比SVG灵活的多。

返回2D环境

返回2D环境，就是大家平常说的canvas，通过canvas对象可以返回webgl绘图环境，也可以返回2D绘环境，不过大家在表达的时候，2D绘图环境通常表达为canvas，而canvas返回的3D环境，使用WebGL去表述。

   var ctx=canvas.getContext('2d');

WebGL

WebGL是一个技术标准，来源于比较成熟的OpenGL和OpenGL ES标准，目前大多数浏览器都能够支持WebGL技术标准。通过WebGL技术标准可以实现3D绘图。
要想实现WebGL或者说获得WebGL API来绘制三维场景，需要通过HTML的Canvas元素来实现。具体来说就是通过getContext()方法，参数是2d返回2D绘图环境，参数是’webgl’返回3D，也就是WebGL绘图环境。返回的上下文对象gl具有一系列的方法，这些方法就是WebGL API，比如
gl.linkProgram()
。其实你也可以把WebGL描述为Canvas，不过WebGL标准比较复杂，所以平时大家沟通，说到canvas，往往是指他的2D绘图功能，如果谈到canvas三维绘图，通常会说WebGL而是canvas。这就是一个约定俗成的问题，没必要深究，还是那句话，多看两句代码，要比看文字有用的多，文字的准确度是远低于代码的。

    //通过getElementById()方法获取canvas画布
    var canvas=document.getElementById('webgl');
    //通过方法getContext()获取WebGL上下文
    var gl=canvas.getContext('webgl');

Three.js

Three.js以WebGL的一款的三维引擎，对于WebGL API和着色器语言GLSL进行了封装。
如果你有前端基础你可以简单吧threejs类比为jquery，都是一个js库。虽然你也学习原生HTM和JavaScript，但是实际做项目的时候还是为依赖jquery、vuejs等前端库或框架。同样做大多数的3D项目，都没必要使用原生WebGL去编写，通常借助一款3D引擎去实现，国内使用最多的就是Three.js引擎，中文资料也比较多，如果你想学习WebGL，选择Three.js还是不错的。