6.1   使用<canvas>标记

6.1  使用<canvas>标记

<canvas>标记是在HTML 5中新增的一个HTML元素，此元素可以被JavaScript语言使用，也可以绘制图形图像，例如可以画图、合成图象或实现动画效果。标记<canvas>具有画布功能，画布是一个矩形区域，在上面可以控制其每1个像素。HTML 5中的<canvas>拥有多种绘制图形的方法，例如矩形、圆形、字符以及添加图像。

在向HTML 5页面中添加<canvas>元素时，需要设置元素的id、宽度值和高度值，例如下面的代码。

标记<canvas>本身并没有绘图能力，需要在JavaScript的帮助下完成绘制工作。例如下面的代码。

使用JavaScript实现绘图的基本流程如下。

（1）JavaScript使用id来寻找<canvas>元素，例如下面的代码。

（2）创建context对象，例如下面的代码。

对象getContext（"2d"）是内建的HTML 5对象，它拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。例如通过下面的代码可以绘制一个红色的矩形。

在上述代码中，方法fillStyle（）的功能是将矩形染成红色，方法fillRect（）的功能是设置图形的形状、位置和尺寸，例如上述代码设置了坐标参数为（0，0，150，75），意思是在画布上绘制一个150×75的矩形，并且是从左上角（0，0）开始绘制的。