JavaScript程序（HelloCanvas.js）
HelloCanvas.js如例2.3所示，共有18行，包含一些注释和错误检测，它遵循着绘制二维图形时的三个步骤：获取＜canvas＞元素、获取绘图上下文、开始绘图。
例2.3 HelloCanvas.js
和上一个示例程序一样，本例也只有一个main（）函数，将这个函数绑定在HelloCanvas.html中＜body＞元素的onload属性上（第8行），如图2.7所示。
图2.8显示了示例程序中main（）函数的执行流，包含了以下四个步骤，我们将分别讨论。
图2.8 main（）函数的执行流
获取＜canvas＞元素
首先，main（）函数从HTML文件中获取了＜canvas＞元素——与在DrawRectangle.js中一样，我们使用了document.getElementById（）函数，但是传入参数变为了webgl，这是图2.7中第9行的＜canvas＞元素的id。
函数的返回值存储在canvas变量中。
为WebGL获取绘图上下文
接下来，程序使用变量canvas来获取WebGL绘图上下文。通常来说，我们应该使用canvas.getContex（）函数来获取绘图上下文（就像在前一个示例程序中那样）。但是，在获取WebGL绘图上下文时，canvas.getContex（）函数接收的参数，在不同浏览器中会不同[2]，所以我们写了一个函数getWebGLContex（）来隐藏不同浏览器之间的差异。
这个函数就是前面提到过的对WebGL编程有用的辅助函数之一，它被定义在专为本书编写的cuon-utils.js文件中。我们在HelloCanvas.html中，用＜script＞标签的src属性将该文件引入进来（第15行），然后就可以使用其中的函数了。下面是函数getWebGLContext（）的规范。
可见，获取＜canvas＞元素，并从该元素上获取绘图上下文的过程与DrawRectangle.js中的很类似，后者的上下文是用来绘制二维图形的。
相似地，getWebGLContext（）函数返回了WebGL绘图上下文，我们就用这个绘图上下文在＜canvas＞上绘图，这与绘制矩形的方式很像。但是，现在这个绘图环境可以绘制三维（而不是二维）图形了，也就是说我们可以开始使用WebGL函数了。我们将上下文存储在名为gl的变量中（第7行），你也可以将其命名成其他名称。本书中我们将其命名为gl，因为WebGL是基于OpenGL ES的，这样命名能够使WebGL中的函数名与OpenGL ES中的函数名对应起来。比如，第14行的gl.clearColor（）函数就对应着OpenGL ES 2.0或OpenGL中的glClearColor（）函数。
本书中在调用所有WebGL相关方法时，都假定绘图上下文存储在名为gl的变量中。
有了WebGL绘图上下文之后，就用它来设置背景色，然后用背景色清空＜canvas＞绘图区域。
设置＜canvas＞的背景色
在前几节的DrawingRectangle.js中，我们在绘制矩形之前就指定了绘图颜色。在WebGL中，与之相似，清空绘图区之前你也得指定背景颜色。第14行使用gl.clearColor（）以RGBA格式设置背景色。
3 在这本书中，所有WebGL相关方法都有“错误”项。这表示，函数发生了错误，错误不能由函数返回值表示。在默认情况下，这些错误都不会显示出来，但可以通过指定getWebGLContex（）方法中第2个参数为true来使其显示在JavaScript控制台上。
示例程序执行了gl.clearColor（0.0，0.0，0.0，1.0），背景色被指定为黑色。下面是一些其他颜色的例子：
你可能会注意到，前一节二维图形程序DrawRectangle中，颜色分量值在0到255之间。但是，由于WebGL是继承自OpenGL的，所以它遵循传统的OpenGL颜色分量的取值范围，即从0.0到1.0。RGB的值越高，颜色就越亮；类似地，第4分量α的值越高，颜色就越不透明。
一旦指定了背景色之后，背景色就会驻存在WebGL系统（WebGL System）中，在下一次调用gl.clearColor（）方法前不会改变。换句话说，如果将来什么时候你还想用同一个颜色再清空一次绘图区，没必要再指定一次背景色。
清空＜canvas＞
最后，你可以调用gl.clear（）函数，用之前指定的背景色清空（即用背景色填充，擦除已经绘制的内容）绘图区域。
注意，函数的参数是gl.COLOR_BUFFER_BIT，而不是（你可能认为会是）表示绘图区域的＜canvas＞。这是因为WebGL中的gl.clear（）方法实际上继承自OpenGL，它基于多基本缓冲区模型，这可比二维绘图上下文复杂得多。清空绘图区域，实际上是在清空颜色缓冲区（color buffer），传递参数gl.COLOR_BUFFER_BIT就是在告诉WebGL清空颜色缓冲区。除了颜色缓冲区，WebGL还会使用其他种类的缓冲区，比如深度缓冲区和模板缓冲区。颜色缓冲区具体将在本章稍后部分介绍，而深度缓冲区将出现在第7章“进入三维世界”中。由于模板缓冲区很少被使用，因为它本书将不会涉及。
清空颜色缓冲区将导致WebGL清空页面上的＜canvas＞区域。
如果没有指定背景色（也就是说，你没有调用gl.clearColor（）），那么使用的默认值如下所示（表2.1）。
表2.1 清空缓冲区的默认颜色及其相关函数
现在你应该已经通读并理解了这个简单的WebGL示例程序。你应该把HelloCanvas加载到浏览器中，看看绘图区域是不是变成了一片黑色。提醒一下，你可以在本书的同步站点上找到所有示例程序。如果想利用这些示例程序做些实验，你需要将这些示例从站点下载到本地磁盘中，然后把磁盘中的HelloCanvas.html加载到浏览器里。