思路：
- 构建<canvas>画布节点，获取其的实例。
- 使用getWebGLContext() 拿到画布上下文。
- 拿到上下文用clearColor() 设置背景颜色。
- 最后清空canvas画布,是为了清除颜色缓冲区。
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系统的着色器程序这两个部分。
*/
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
//将指定缓冲区设定为预定的值。如果清空的是颜色缓冲区,那么将使用gl.clearColor()的值(作为预定值)。
gl.clear(gl.COLOR_BUFFER_BIT);
}
最终效果：
