HTML绘制渐变图形(一)（html渐变背景色）

渐变是两种或更多颜色的平滑过渡，是指在颜色集上使用逐步抽样算法，并将结果应用于描边样式和填充样式中。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绘制渐变图形（二）