默認情況下，canvas是透明的。
canvas可以靈活地支持二維圖形和三維圖形劳吠，它不直接提供繪圖方法，而是提供一種叫
上下文（context）的機制來進行繪圖宪赶。WebGL 中的顏色取值
rgba繼承OpenGL宗弯， 取值為0.0 — 1.0
如果沒有指定背景色，默認值如下:
gl.clear(gl.COLOR_BUFFER_BIT)清空繪圖區(qū)域搂妻，實際上是在清空顏色緩沖區(qū)（color buffer）蒙保。
WebGL中除了顏色緩沖區(qū)，還有比如深度緩沖區(qū)（DEPTH_BUFFER_BIT）欲主、模板緩沖區(qū)（STENCIL_BUFFER_BIT）等邓厕。gl.clearColor()指定了背景色以后，背景色會駐存在WebGL系統中扁瓢，在下一次調用gl.clearColr()方法前不會改變详恼。即，如果后面你想用同一種顏色再清空一次繪圖區(qū)引几，沒必要再指定一次背景色昧互。WebGL依賴一種新的稱為
著色器（shader）的繪圖機制。WebGL需要兩種著色器：
（1）頂點著色器（Vertex shader）：用來描述頂點的特性（如位置伟桅、顏色等）敞掘。
（2）片元著色器（Fragment shader） ： 進行逐片處理過程（如光照等），片元也可以理解為像素（圖像的單元）楣铁。
- WebGL程序執(zhí)行流程
最右邊的是顏色緩沖區(qū)不是瀏覽器玖雁，因為顏色緩沖區(qū)的內容會自動顯示在瀏覽器中。
- 初始化著色器
initShaders()的行為
在初始化著色器之前盖腕，頂點著色器和片元著色器都是空白的赫冬，我們需要將字符串形式的著色器代碼從JavaScript傳給WebGL系統，并建立著色器赊堪，這就是initShaders()所做的事情面殖。
注意：
著色器代碼運行在WebGL系統中，而不是JavaScript程序中哭廉。
頂點著色器先執(zhí)行脊僚，片元著色器后執(zhí)行。
WebGL程序包括運行在瀏覽器中的JavaScript和運行在WebGL 系統中的著色器這兩部分遵绰。
頂點著色器
var VSHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point
' gl_PointSize = 10.0;\n' + // Set the point size
'}\n';
（1）void → 沒有返回值
（2）不能為main函數指定參數
（3）gl_Position 表示位置辽幌，是內置變量，必須被賦值椿访，否則著色器無法工作
（4）gl_PointSize 表示尺寸乌企，也是內置變量，默認值為1.0
gl_Position = vec4(0.0, 0.0, 1.0, 1.0)
前三個分量分別為X, Y, Z成玫，最后一個分量為 齊次坐標
- 片元著色器
// Fragment shader program
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
'}\n';
- 繪制操作
步驟：
（1）清空繪制區(qū)
（2）gl.drawArrays(mode, first, count)
gl.drawArrays(mode, first, count) 將會執(zhí)行 count 次
- WebGL 坐標系統
- attribute 變量 和 uniorm 變量
attribute 變量： GLSL ES變量加酵，傳輸的是那些與頂點相關的數據（外部向頂點著色器傳輸拳喻，只有頂點著色器能使用）。
uniform 變量： 傳輸的是那些與所有頂點都相同（或與頂點無關）的數據 （數據傳輸的目標是片元著色器猪腕，而非頂點著色器）冗澈。
為了使用 attribute 變量：示例程序需要包含以下步驟：
（1）在頂點著色器中，聲明 attribute 變量陋葡；
attribute vec4 a_Position;
attribute 被稱為存儲限定符（storage qualifier）亚亲，它表示接下來的變量，attribute變量必須聲明為全局變量腐缤。
（2）將 attribute 變量賦值給 gl_Position 變量捌归；
先獲取 attribute變量的存儲位置:
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
gl.program => 程序對象，包含了頂點著色器和片元著色器
（3）向 attribute 變量傳輸數據岭粤；
將頂點位置傳輸給 attribute 變量：
gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);
gl.vertexAttrib3f()的同族函數:
WebGL 相關函數命名規(guī)范：
使用 uniform 變量步驟：
（1）在片元著色器中準備 uniform 變量惜索；
uniform vec4 u_FragColor;
precision mediump float; 精度限定詞（precision qualifier） ,指定變量的范圍（最大值與最小值）和精度。
（2）用這個 uniform 變量向 gl_FragColor 賦值绍在；
獲取 uniform 變量的存儲地址门扇。
（3）將顏色數據從JavaScript傳給該 uniform 變量。
向 uniform 變量賦值 gl.uniform4f(location, v0, v1, v2, v3)
gl.uniform4f()的同族函數
