<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Clear canvas</title> </head> <body onload="main()"> <canvas id="webgl" width="400" height="400"> </canvas> <script src="lib/webgl-utils.js"></script> <script src="lib/webgl-debug.js"></script> <script src="lib/cuon-utils.js"></script> <script src="HelloCanvas.js"></script> </body> </html>
function main(){
var canvas=document.getElementById("webgl");
var gl=getWebGLContext(canvas);
if(!gl)
{
console.log('Failed to get the rendering context for WebGL');
return;
}
gl.clearColor(0.0,0.0,0.0,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
直接看js代码：
在第一个小程序中使用的是canvas.getContext()获取上下文，因为在不同浏览器中这个函数接受的参数不同，所以封装在放在cuon-utils.js文件getWebGLContxt()中;
function getWebGLContext(canvas, opt_debug) { // Get the rendering context for WebGL var gl = WebGLUtils.setupWebGL(canvas); if (!gl) return null; // if opt_debug is explicitly false, create the context for debugging if (arguments.length < 2 || opt_debug) { gl = WebGLDebugUtils.makeDebugContext(gl); } return gl; }
这是封装的函数，这样上下文信息都存储在gl变量中。
gl.clearColor(red,green,blue,alph)清空绘图区前要指定背景颜色(0-1的范围)
最后gl.clear()将之前指定的的背景色清空传入(gl.COLOR_BUFFER_BIT)，这个方法继承自OpenGL，基于多基本缓冲区模型，
这个参数是要清除颜色缓冲区，还有清除深度缓冲区和模板缓冲区的参数（gl.DEPTH_BUFFER_BIT）和gl.STENCIL_BUFFER_BIT