Canvas 、WebGL 、SVG和Three.js

Canvas 、WebGL 、SVG和Three.js都可以在浏览器中绘制2D、3D图形，其区别如下：

1、SVG:

使用XML语言描述，只能绘制二维图形。

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

2、Canvas

HTML5的新元素，支持2D和WebGL

var canvas4 = document.getElementById("canvas4");
    var context4 = canvas4.getContext("2d");
    canvas4.width = 400;
    canvas4.height = 400;
    context4.beginPath();
    context4.arc(100, 100, 1, 0, Math.PI * 2, true);
    context4.closePath();
    context4.fillStyle = 'rgb(255,255,255)';
    context4.fill();

3、WebGL

WebGL是一个技术标准，可以实现3D绘图。三维场景需要通过HTML的Canvas元素来实现。通过getContext()方法，参数是2d返回2D绘图环境，参数是’webgl’返回3D，也就是WebGL绘图环境。

 var canvas=document.getElementById('webgl');

4、three.js

基于WebGL的一款的三维引擎。three.js