SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
以上来自：http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp
WebGL
WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
简单来说，WebGL 就是基于canvas的一个渲染框架，可以在canvas上绘制2D，3D图像
下面代码是用原生 js 写webgl，来绘制图形
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>webgl</title> 6 <!-- 防止被缓存--> 7 <meta http-equiv="Pragma" content="no-cache" /> 8 <meta http-equiv="Cache-Control" content="no-cache" /> 9 <meta http-equiv="Expires" content="0" /> 10 <!-- 极速模式--> 11 <meta name="renderer" content="webkit" /> 12 <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> 13 <meta name="apple-mobile-web-app-capable" content="yes" /> 14 <meta name="full-screen" content="true" /> 15 <meta name="screen-orientation" content="portrait" /> 16 <meta name="x5-fullscreen" content="true" /> 17 <meta name="360-fullscreen" content="true" /> 18 </head> 19 <body> 20 <canvas id="drawing" width="800" height="800">您的浏览器不支持canvas标签;</canvas> 21 <!--WebGL使用着色器信息绘图，着色器使用OpenGL ES（GLSL）编写， 22 着色器分为顶点着色器（Vertex shader）和片元着色器（Fragment shader），顶点着色器描述位置信息，片元着色器描述颜色信息。 23 gl_Position、gl_PointSize、gl_FragColor均为GLSL内置变量名， 24 vec4描述了数据类型为4个浮点数，相应的vec1表示1个浮点数，vec2表示2个浮点数，vec3表示3个浮点数 25 在gl_Position中的4个数值中，前3个应该是三维坐标的x、y、z，目前还不太明白最后一个数值的意义 26 有了着色器信息后，就可以使用这些信息开始绘制了 27 --> 28 <script type="x-webgl/x-shader" id="vertex-shader"> 29 #ifdef GL_ES 30 precision mediump float; 31 #endif 32 attribute vec2 aVertexPosition; 33 void main() { 34 gl_Position = vec4(aVertexPosition, 0.0, 1.0); 35 } 36 </script> 37 <script type="x-webgl/x-shader" id="fragment-shader"> 38 #ifdef GL_ES 39 precision mediump float; 40 #endif 41 uniform vec4 uColor; 42 void main() { 43 gl_FragColor = uColor; 44 } 45 </script> 46 <!--结束使用脚本script标签编写片段着色器文本;--> 47 <!--结束04.使用脚本script标签编写着色器文本;--> 48 <script> 49 var drawing = document.getElementById(‘drawing‘); 50 var theContextSetting; 51 var gl; 52 var buffer; 53 var vertices; 54 var thisProgram; 55 var vertexShader; 56 var fragmentShader; 57 var node; 58 59 if (drawing.getContext) { 60 try { 61 theContextSetting = { 62 alpha: true, 63 depth: true, 64 stencil: false, 65 antialias: true, 66 premultipliedAlpha: true, 67 preserveDrawingBuffer: false, 68 }; 69 70 gl = drawing.getContext(‘experimental-webgl‘, theContextSetting); 71 } catch (ex) { 72 console.log(‘浏览器无法创建WebGL上下文并抛出错误,此时抛出的错误参数ex--->‘, ex); 73 } 74 75 if (gl) { 76 //开始01.准备绘图; 77 gl.clearColor(1.0, 0.0, 1.0, 1.0); //首先必须使用clearColor()方法来指定要使用的颜色值,该方法接收4个参数: 红、绿、蓝和透明度;每个参数必须是一个0到1之间的数值,表示每种分量在最终颜色中的强度; 78 gl.clear(gl.COLOR_BUFFER_BIT); //调用了clear()方法,传入的参数gl.COLOR_BUFFER_BIT告诉WebGL上下文对象使用之前定义的颜色来填充相应区域; 79 //结束01.准备绘图; 80 81 //开始02.定义WebGL上下文对象的视口; 82 gl.viewport(0, 0, drawing.width, drawing.height); 83 //结束02.定义WebGL上下文对象的视口; 84 85 //开始03.设置缓冲区; 86 buffer = gl.createBuffer(); 87 vertices = new Float32Array([0, 1, 1, -1, -1, -1]); 88 //开始将数据放入缓冲区; 89 gl.bindBuffer(gl.ARRAY_BUFFER, buffer); 90 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 91 //结束将数据放入缓冲区; 92 //结束03.设置缓冲区; 93 94 //开始05.编写着色器对象并链接到着色器程序中; 95 //开始编写顶点着色器对象; 96 node = document.getElementById(‘vertex-shader‘); 97 vertexShader = gl.createShader(gl.VERTEX_SHADER); 98 gl.shaderSource(vertexShader, node.text); 99 gl.compileShader(vertexShader); 100 //结束编写顶点着色器对象; 101 102 //开始编写片段着色器对象; 103 node = document.getElementById(‘fragment-shader‘); 104 fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); 105 gl.shaderSource(fragmentShader, node.text); 106 gl.compileShader(fragmentShader); 107 //结束编写片段着色器对象; 108 109 //开始创建着色器程序并把两个着色器对象链接到到着色器程序中; 110 thisProgram = gl.createProgram(); 111 gl.attachShader(thisProgram, vertexShader); 112 gl.attachShader(thisProgram, fragmentShader); 113 gl.linkProgram(thisProgram); 114 gl.useProgram(thisProgram); 115 //结束创建着色器程序并把两个着色器对象链接到到着色器程序中; 116 //结束05.编写着色器对象并链接到着色器程序中; 117 118 //开始06.为着色器传入值; 119 120 var vertexSetSize = 2; 121 var vertexSetCount = vertices.length / vertexSetSize; 122 var uColor; 123 var aVertexPosition; 124 125 //开始为片段着色器进行赋值; 126 uColor = gl.getUniformLocation(thisProgram, ‘uColor‘); 127 var uColorValue = [1.0, 1.0, 0.0, 1.0]; 128 gl.uniform4fv(uColor, uColorValue); 129 //结束为片段着色器进行赋值; 130 131 //开始为顶点着色器进行赋值; 132 aVertexPosition = gl.getAttribLocation(thisProgram, ‘aVertexPosition‘); 133 gl.enableVertexAttribArray(aVertexPosition); 134 gl.vertexAttribPointer(aVertexPosition, vertexSetSize, gl.FLOAT, false, 0, 0); 135 //结束为顶点着色器进行赋值; 136 //结束06.为着色器传入值; 137 138 //开始07.绘图; 139 gl.drawArrays(gl.TRIANGLES, 0, vertexSetCount); 140 //结束07.绘图; 141 } else { 142 console.log(‘您的浏览器不支持WebGL画图;‘); 143 } 144 } 145 </script> 146 </body> 147 </html>
更多webgl学习可参考链接：https://www.cnblogs.com/etopx/p/6535638.html
其他 SVG，Canvas，WebGL的简单学习可以参考下面链接
https://www.cnblogs.com/best/p/6107565.html