三、在Canvas中使用WebGL

　　上一篇介绍了如何在标签中绘制2d图形；接下来，我们看看如何在中使用WebGL来绘制3d图形。

　　我们开始编写一个最短的WebGL程序：Hello WebGL;这个程序的功能非常简单，使用指定颜色清空标签的绘图区；下图显示了程序运行的效果，清空（用黑色）了定义的矩形区域。

　　我们来看下代码，先看一下Hello WebGL.html：

 1 
  2 
  3 
  4     
  5     
  6     
  7     
  8     
  9     
 10     
 11     
 12     
 13     
 14     
 31 
 32 
 33     
 34     
 35         
 36         Please use the browser supporting "canvas".
 37     
 38 
 39 

　　文件结构很简单：首先使用元素定义绘图区域；然后指定当页面加载完成时，调用main()函数。

　　在main()函数中，我们通过id找到标签；直到这一步，我们发现，跟绘制2d图形的步骤是一模一样的。但是下一句，获取绘图上下文，好像有点不一样了；在绘制2d图形的时候，我们是通过调用canvas的getContext方法，传入“2d”参数来获取2d图形的回绘图上下文的；这里需要解释一下，通常来说，我们应该使用canvas.getContext()函数来获取绘图上下文（就像之前那样）。但是在获取WebGL绘图上下文时，canvas.getContext()函数接收的参数，在不同浏览器中会不同（虽然大部分浏览器都接收字符串“expeimental-webgl”或“webgl”，但并非所有浏览器都这样），所以我们使用getWebGLContext(canvas)来隐藏不同浏览器之间的差异。getWebGLContext(canvas, opt_debug)函数位于cuon-utils.js文件中。在代码里，通过