思路：
- 構建<canvas>畫布節(jié)點，獲取其的實例。
- 使用getWebGLContext() 拿到畫布上下文。
- 拿到上下文用clearColor() 設置背景顏色。
- 最后清空canvas畫布,是為了清除顏色緩沖區(qū)。
html結構：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>測試</title><script src="./lib/webgl-utils.js"></script><script src="./lib/webgl-debug.js"></script><script src="./lib/cuon-utils.js"></script><!--第一個webGL上手案例 (webGL的構建流程)--><script src="./js/helloCanvas.js"></script>
</head><body onload="main()"><canvas id="canvas" width="400" height="400"></canvas>
</body></html>
javascript腳本：
//helloCanvas.js
function main () {/*** WebGL程序包括運行在瀏覽器中的JavaScript和運行在WebGL系統(tǒng)的著色器程序這兩個部分。*/const canvas = document.getElementById('canvas');const gl = getWebGLContext(canvas);if (!gl) {console.log('WebGL初始化失敗');return;}// 設置背景色gl.clearColor(0.0, 0.0, 0.0, 1.0);// 清空canvas//將指定緩沖區(qū)設定為預定的值。如果清空的是顏色緩沖區(qū),那么將使用gl.clearColor()的值(作為預定值)。gl.clear(gl.COLOR_BUFFER_BIT);
}
最終效果：
