渐变是两种或更多颜色的平滑过渡，是指在颜色集上使用逐步抽样算法，并将结果应用于描边样式和填充样式中。canvas的绘图上下文支持两种类型的渐变：线性渐变和放射性渐变，其中放射性渐变也称径向渐变。
绘制渐变图形
创建一个简单的渐变非常容易，可能比使用Photoshop还要快，需要三个步骤。
（1）创建渐变对象。
var gradient=cxt.createRadialGradient（0，0，0，canvas.height）；
（2）为渐变对象设置颜色，指明过渡方式。
gradient.addColorStop(0,'#fff');
gradient.addColorStop(1,'#000');
（3）在context上为填充样式或者描边样式设置渐变。
cxt.fillStyle=gradient;
要设置显示颜色，在渐变对象上使用addColorStop函数即可。除了可以变换成其他颜色外，还可以为颜色设置alpha值（例如透明），并且alpha值也是可以变换的。为了达到这样的效果，需要使用颜色值的另一种表示方法，如内置alpha组建的CSSrgba函数。
绘制线性渐变，会使用到如下表所示几个方法。
（1）编写代码如下图所示：
（2）在浏览器中打开文件，预览效果图如下所示，可以看到网页中创建了一个垂直方向上的渐变，从上到下颜色逐渐变浅。
小提示：上面的代码是2D环境对象产生了一个线性渐变对像，渐变的起始点是（0,0），渐变的结束点是（0，canvas.height），下面使用addColorStop函数设置渐变颜色，最后将渐变填充到上下文环境的样式中。
下次将讲绘制径向渐变，HTML绘制渐变图形（二）