渐变在我们的日常生活中是一种随处可见的非常普遍的一种视角形象。Canvas为实现渐变效果供应了很好的办理方案。在HTML5中紧张有两种渐变办法，一种是沿着直线的渐变办法，另一种是从一个点或圆的半径向四周渐变的办法，我们把这两种办法叫做线性渐变和径向渐变。本日我们紧张先容这两种渐变的绘制方法。
1.线性渐变的绘制方法
Canvas供应了用于创建线性渐变的函数createLinearGRadient（x0,y0,x1,y1）,坐标点是（x0,y0）指定了线性渐变的出发点，坐标点（x1,y1）指定了线性渐变的终点，如果这两个坐标点在一条水平线上，那么就会创建水平线性渐变；如果这两个坐标点在一条垂直线上，那么将创建垂直线性渐变；如果这两个坐标点连线是一条倾斜的直线，那么将创建倾斜线性渐变。那么假设现在我们要创建一个宽度为300的水平线性渐变，示例代码如图所示：
HTML5中宽度为300的水平线性渐变的绘制代码
有了一个渐变工具之后，我们就须要定义渐变的颜色了。在Canvas中利用addColorStop（stop，color）函数来定义渐变的颜色，参数stop表示开始渐变位置占渐变区域的百分比，为0~1之间的任意值，参数color为颜色样式。在实际运用中，至少要添加两种以上颜色才能达到渐变效果。例如要创建从赤色到蓝色的渐变，可以利用图中这个示例代码：
HTML5中渐变颜色的定义
接下来我们须要设置Canvas内容的fillStyle为当前的渐变工具，并且绘制图形，比如一个矩形或一条直线。以是，为了看到渐变效果，我们还须要以下代码：
HTML5中绘制渐变图形
到这里，一个线性渐变的图形就绘制完成了，完全的示例代码如图：
HTML5中绘制红蓝渐变的代码示例
在谷歌浏览器上预览效果如图：
HTML5中绘制红蓝渐变的效果示例
2.径向渐变的绘制
径向渐变与线性渐变的实现办法基本类似，在Canvas中利用createRadialGradient(x0,y0,r0,x1,y1,r1)函数创建一个沿两个圆之间的锥面绘制渐变。前三个参数代表圆心为(x0,y0)，半径为r0的开始圆，后三个参数代表圆心为(x1,y1)，半径为r1的结束圆。创建该工具后，仍须要利用addColorStop函数定义渐变颜色，并设置径向渐变工具为fillStyle确当前渐变工具，末了绘制一个渐变图形，完成径向渐变的绘制。绘制径向渐变的示例代码如图所示：
HTML5中径向渐变的绘制代码示例
在谷歌浏览器上预览效果如图：
HTML5中径向渐变的绘制效果示例
还有一点要把稳的是在绘制径向渐变时，可能会由于Canvas的宽度或高度设置不得当，导致径向渐变显示不完全，这时候就要考虑跳转Canvas的尺寸了，以便能完全显示径向渐变的效果。这一次线性渐变和径向渐变便是这些了。感激大家的不雅观看。祝大家：身体康健、生活愉快！
