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