DrawRectangle.js

DrawRectangle.js是例2.2中在＜canvas＞元素上绘制蓝色矩形的程序，它只有16行代码。为了在＜canvas＞上绘制二维图形（2D图形），需经过以下三个步骤：

1.获取＜canvas＞元素；

2.向该元素请求二维图形的“绘图上下文”[1]；

3.在绘图上下文上调用相应的绘图函数，以绘制二维图形。

不管是绘制二维还是三维的图形，这三个步骤是一样的。本例绘制的是简单的二维矩形，如果要使用WebGL绘制三维图形，那么第二步就是获取绘制三维图形的绘图上下文；在更抽象的层面上，两者是一样的。

例2.2　DrawRectangle.js

依次来看看这几步。

获取＜canvas＞元素

为了在＜canvas＞上进行绘制，首先得在HTML文件中通过JavaScript程序获取＜canvas＞元素。可以使用document.getElementById函数来获取（第4行）。这个方法只有一个参数，就是HTML文件中＜canvas＞标签的id属性，即字符串'example'，它被定义在DrawRectangle.html的第9行（例2.1）。

如果函数的返回值不是null，就说明你成功获取了该元素；如果函数返回了null，就说明获取失败了。你可以用一个简单的if判断来进行检查（第5行），如果获取失败了，就调用console.log（）在浏览器控制台上显示参数字符串（第6行）。

注：在Chrome浏览器中，你可以通过工具——JavaScript控制台或快捷键Ctrl+Shift+J 来显示控制台（如图2.4所示）；在Firefox浏览器中，你可以通过工，Web开发者工具——Web控制台或快捷键Ctrl+Shift+K来这样做。

通过元素来获取二维图形的绘图上下文

由于＜canvas＞元素可以灵活地同时支持二维图形和三维图形，它不直接提供绘图方法，而是提供一种叫上下文（context）的机制来进行绘图。我们首先获取这个上下文（第11行）：

canvas.getContex（）方法的参数指定了上下文的类型（二维或三维）。在本例中，如果你想要绘制二维图形，就必须指定为2d（注意区分大小写）。

这一行的执行结果，就是绘图上下文被存储到了ctx变量中待使用。注意，为了简洁，本例省略了错误检查，在你自己的项目中，你应该总是进行错误检查。

使用上下文支持的方法来绘制二维图形

有了绘图上下文，我们来看一看绘制蓝色矩形的代码。它分为两步：首先，在绘图时设置要使用的颜色（第14行）；然后，用这个颜色绘制矩形（第15行）。

设置颜色的字符串rgba（0，0，255，1.0）中的rgba指定了r（红色）、g（绿色）、b（蓝色）、a（α：透明度）的值，前三者在0（最小值）到255（最大值）之间，而α在0.0（透明）到1.0（不透明）之间。计算机系统通常使用红、绿、蓝这三原色组合来表示颜色，这种颜色表示方式被称为RGB格式，当α（透明度）加进来之后，就成为RGBA格式。

然后我们使用fillStyle属性指定的填充颜色绘制（或者说填充）了矩形（第15行）。在讨论第15行的细节之前，来看一下＜canvas＞元素的坐标系统（如图2.5所示）。

如图所示，＜canvas＞的坐标系统横轴为x轴（正方向朝右），纵轴为y轴（正方向朝下）。注意，原点落在左上方，y轴正方向朝下。用长虚线标出的区域就是HTML文档中的＜canvas＞元素（例2.1），我们指定其为400×400像素宽。用点虚线标出的区域就是示例程序绘制的矩形。

当我们使用ctx.fillRect（）绘制矩形的时候，前两个参数指定了待绘制矩形的左上顶点在＜canvas＞中的坐标，后两个参数指定了矩形的宽度和高度（以像素为单位）。

用浏览器运行DrawRectangle.html后，可见如图2.2所示的矩形。

这一节介绍了如何在＜canvas＞元素中绘制二维图形。WebGL将在＜canvas＞元素中绘制三维图形，下面就让我们进入WebGL的世界。