/*** * 1.画一个矩形 */function main() {    //获取<canvas>标签    var canvas = document.getElementById("myCanvas");    //获取WebGL绘图上下文    var gl = getWebGLContext(canvas, true);    //如果浏览器不支持WebGL则提示错误    if(!gl){        console.log("请使用高版本的浏览器！");        return;    }    console.log(gl);    //指定清除颜色缓冲区的颜色,每个分量的取值范围0-1    gl.clearColor(0.5, 1, 1, 1);    //用指定的颜色清除颜色缓冲区    gl.clear(gl.COLOR_BUFFER_BIT);}/*** * 1.画一个点 *///顶点着色器程序var VSHADER_SOURCE =    "void main(){\n" +    //设置坐标    "gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n" +    //设置尺寸    "gl_PointSize = 10.0;\n" +    "}\n";//片元着色器var FSHADER_SOURCE =    "void main() {\n" +    //设置颜色    "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n" +    "}\n";function main(){    //获取<canvas>标签    var canvas = document.getElementById("myCanvas");    //获取WebGL绘图上下文    var gl = getWebGLContext(canvas, true);    //如果浏览器不支持WebGL则提示错误    if(!gl){        console.log("请使用高版本的浏览器！");        return;    }    console.log(initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE));    //初始化着色器    if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)){        console.log("着色器初始化失败！");        return;    }    //设置<canvas>的背景色    gl.clearColor(0.0, 0.0, 0.0, 1.0);    //清空<canvas>    /***     * gl.clear();函数继承自OpenGL();     * 它基于多基本缓冲区模型,比二维绘图上下文复杂的多。     * 清空绘图区，实际上是在清空颜色缓冲区 通过指定的颜色去擦除已经绘制的内容。     * 传递 gl.COLOR_BUFFER_BIT参数就是在告诉WebGL清空颜色缓冲区。     * 如果在使用该函数之前没有指定任何颜色，那么默认会rgba(0,0,0,0);作为清除颜色。     * 这个颜色是全透明的，替换出来的结果就是什么颜色都没有，显示为浏览器本身的颜色。     *      */    gl.clear(gl.COLOR_BUFFER_BIT);    //绘制一个点    /***     * drawArrays(mode, first, count);     * mode:指定绘图的方式，可接收以下常量符号:     * POINTS LINES LINE_STRIP LINE_LOOP TRIANGLES TRIANGLES_STRIP TRIANGLES_FAN     * first:指定从哪个顶点开始绘制 整型     * count:指定绘制需要用到多少个顶点 整型     * 返回值:无     * 错误:     * INVALID_ENUM:传入mode参数不是前序参数之一     * INVALID_VALUE:参数first或count是负数     */    gl.drawArrays(gl.POINTS, 0, 1);}