2020-04-02

第7行：var gl=getWebGLContext(canvas);

在获取WebGL绘图上下文时，canvas.getContext()函数接收的参数，在不同浏览器中会不同，所以我们写了一个函数getWebGLContext()来隐藏不同浏览器之间的差异。

这个函数是对WebGL编程有用的辅助函数之一。下面是规范：

getWebGLContext( element, [ , debug] )

也就是说，现在这个绘图环境可以绘制三维图形了，也就是说我们可以开始用WebGL函数了。

第7行：我们将上下文存储在名为gl的变量中。

14行：使用gl.clearColor()以RGBA格式设置背景色。

一旦指定了背景色后，背景色就会驻存在WebGL系统中，在下一次调用gl.clearColor()方法前不会改变。

清空

可以调用gl.clear()函数，用之前指定的背景色清空绘制区域。

17 gl.clear(gl.COLOR_BUFFER_BIT);

注意：参数是gl.COLOR_BUFFER_BIT,而不是表示绘图区域的。这是因为WebGL中的gl.clear()方法实际上继承自OpenGL,它基于多基本缓冲区模型，比二维绘图上下文复杂得多。清空绘图区域，实际上是在清空颜色缓冲区（color buffer），传递参数gl.COLOR_BUFFER_BIT就是在告诉WebGL清空颜色缓冲区。

清空颜色缓冲区将导致WebGL清空页面上的区域。

如果没有指定背景色（也就是说，你没有调用gl.clearColor()），那么使用的默认值如下表所示

WebGL依赖于一种新的称为着色器（shader）的绘图机制。着色器提供了灵活强大的绘制二维或三维图形的方法，所有WebGL程序必须使用它。