HTML文件(HelloCanvas.html)

看一下HelloCanvas.html,如图2.7所示。文件的结构很简单:首先使用<canvas>元素定义绘图区域(第9行),然后再引入HelloCanvas.js文件(第16行,即WebGL程序)。

我们还引入了一些其他的JavaScript文件(第13到15行),它们提供了一些在WebGL编程中有用的函数。后面会详细解释,现在就把他们看做库好了。

图2.7 HelloCanvas.html

现在,我们建立了<canvas>(第9行),引入了HelloCanvas程序的JavaScript文件(第16行),在这个文件中,我们开始真正使用WebGL来绘制三维图形。下面来看一下HelloCanvas.js中的WebGL程序代码。