第5章 HTML5的图像及动画 5.1 canvas元素 5.3 图形操作 5.2 使用路径画图 5.4 图像操作 5.5 canvas其他操作 5.6 制作动画 5.7 上机实践——绘制时钟 5.3 图形操作 5.3.1 图形样式设置 前面小节所介绍的绘图方法，绘制的只是图形边缘线条及图形框架。要想使图片变得更加绚丽，就要用到图形样式设置。HTML5通过两个步骤来实现图形样式添加：首先，定义相关样式；其次，调用指定方法使图形应用指定样式。 下面我们以绘制矩形并添加样式为例，介绍相关的属性和方法。 fillStyle属性：为当前画布上下文设置图形样式，默认是纯黑色。使用该属性可以设置为css颜色，一个图案或一种渐变。 fillRect(x,y,width,height)方法：绘制一个矩形，并使用当前的fillStyle样式。 strokeStyle属性：与fillStyle属性用法相同。 strokeRect(x,y,width,height)方法：绘制一个矩形，使用当前的strokeStyle样式绘制矩形的边缘，中间区域不予处理。 clearRect(x,y,width,height)方法：清除指定矩形区域。 下面我们通过一个例子来看这些属性和方法的具体应用，示例代码如下。
绘制带样式的矩形 绘图 保存此段代码并在浏览器中运行，得到的效果如图5-9所示。 HTML5除了提供矩形绘图样式的属性和方法外，还对其他图形也提供了相应的属性及方法设置，使用方法大同小异，这里就不详细介绍了。 5.3.2 渐变图形 渐变在网页设计中是经常用到的一种技术手段，指的是图形填充颜色从一种颜色逐渐转变为另一种颜色。HTML5中实现渐变主要有两种方法：线性渐变和径向渐变。下面我们介绍这两种方法的具体应用。 1．线性渐变 所谓线性渐变指的是点到点之间的渐变，在HTML5中通过createLinearGradient方法创建LinearGradient对象实现线性渐变。createLinearGradient方法的应用格式如下： createLinearGradient(xStart,yStart,xEnd,yEnd); 图5-9 为矩形添加样式 该方法中涉及的各个参数说明如下。 (1)xStart：渐变起始点的横坐标。 (2)yStart：渐变起始点的纵坐标。 (3)xEnd：渐变终止点的横坐标。 (4)yEnd：渐变终止点的纵坐标。 当调用该方法时，将创建一个使用起点坐标及终点坐标的LinearGradient对象，为该对象设置渐变颜色及渐变度的方法应用格式如下： addColorStop(offset,color); 该方法中涉及的两个参数说明如下。 (1)offset：颜色从离开渐变起始点开始变化的偏移量。 (2)color：渐变使用的颜色。 下面通过一个例子来演示线性渐变的具体应用和实际效果，示例代码如下。
