<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body οnlοad="main()">
<canvas id="canvas" height="400" width="400">
    你的浏览器不支持WebGL，请更换新的浏览器
</canvas>
</body>
<script src="lib/webgl-utils.js" ></script>
<script src="lib/webgl-debug.js" ></script>
<script src="lib/cuon-utils.js" ></script>
<script>
    function main() {
        //首先获取到canvas的dom对象
        var canvas = document.getElementById("canvas");

        //获取到WebGL的上下文
        var gl = getWebGLContext(canvas);

        //不支持WebGL的浏览器将打印一个错误，并结束代码运行
        if (!gl) { 
            console.log("浏览器不支持WebGL");
            return;
        }

        //指定一个覆盖（清空）canvas的颜色
        gl.clearColor(0.0, 0.0, 0.0, 1.0);

        //执行清空
        gl.clear(gl.COLOR_BUFFER_BIT);
    }
</script>
</html>


1.引入了为WebGL准备的三个函数库。

2.使用了一个获取WebGL上下文的兼容性的方法getWebGLContext

getWebGLContext(element[,debug]); 用来获取WebGL绘图的上下文。

参数：1.element  指定canvas的元素对象

2.debug（可选） 默认为false，如果设置为true，Javascript中发生的错误将被显示在控制台上。注意，在调试结束后关闭它，否则影响性能。

返回值：  not-null WebGL绘图上下文，  null  WebGL不可用