使用＜canvas＞标签

让我们来看一下HTML是如何使用＜canvas＞标签，以及DrawRectangle函数是如何工作的。例2.1显示了DrawingRectangle.html。请注意，本书中所有的HTML文件都是采用HTML5编写的。

例2.1　DrawingRectangle.html

我们定义了＜canvas＞标签（第9行），通过width属性和height属性规定它是一片400×400像素的区域，并用id属性为其指定了唯一的标识符（这将在之后用到）：

默认情况下，＜canvas＞是透明的，如果不用JavaScript在上面画些什么（我们马上就要这样做了），你是看不到＜canvas＞的。在HTML中为WebGL程序准备一个＜canvas＞就是这么简单，需要注意的是，这行代码只在支持＜canvas＞的浏览器中起作用，不支持＜canvas＞的老式浏览器会直接忽略这一行，当然也不会显示＜canvas＞。我们可以像下面这样在标签中加入一条错误信息，以提醒还在用着那些老式浏览器的用户。

为了在＜canvas＞中绘图，还需要编写一些相关的JavaScript代码。可以将其直接写在HTML文件中，也可以写成单独的JavaScript文件。为使代码更加易读，在我们的例子中采用第二种方式。但是不论采取哪种方式，你都需要告诉浏览器JavaScript代码从何处开始执行。我们为＜body＞元素指定onload属性，告诉浏览器＜body＞元素加载完成后（也就是页面加载完成后）执行main（）函数，并作为JavaScript程序的入口（第8行）。

然后让浏览器去加载JavaScript文件DrawRectangle.js，main（）函数就定义在其中。

为了避免混淆，本书中的所有示例程序的HTML文件，和加载到其中的JavaScript文件都使用相同的名称（如图2.3所示）。

图2.3　DrawRectangle.html和DrawRectangle.js