清空绘图区

HelloCanvas.html　　

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>Clear canvas</title>
 6 </head>
 7 <body onload="main()">
 8     <canvas id="webgl" width="400" height="400">
 9         Please use the browert supporting "canvas"
10     </canvas>
11     <script src="../lib/webgl-utils.js"></script>
12     <script src="../lib/webgl-debug.js"></script>
13     <script src="../lib/cuon-utils.js"></script>
14 
15     <script src="HelloCanvs.js"></script>
16 </body>
17 </html>

　　首先使用<canvas>元素定义绘图区域(第8行)，然后引入HelloCanvas.js文件(webgl程序)，第11-13行引入了定义好的一些库。

//HelloCanvas.js
function main() {
    // 获取<canvas>元素
    var canvas = document.getElementById('webgl');

    // 获取webGL绘图上下文
    var gl = getWebGLContext(canvas);
    if (!gl) {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }

    // 指定清空<canvas>的颜色
    gl.clearColor(0.0, 0.0, 1.0, 1.0);

    // 清空<canvas>
    gl.clear(gl.COLOR_BUFFER_BIT);
}