渐变的长度
　　我们在使用渐变的时候要非常明白的知道渐变的长度的概念。如果我们设置渐变从x=10扩展到x=110的距离，那么渐变只会作用在水平方向上从10到110的距离的范围内。超出这个范围的图形将任然受渐变色的影响，但是在这个范围之外的颜色只会是渐变的开始或结束颜色。

　　距离来说，加入有一个水平线性渐变，x1=150，x2=350。渐变从蓝色过渡到绿色。那么所有水平方向定位x值小于150的图形都会使用蓝色蓝填充。所有水平方向定位x值大于350的图形都会使用绿色来填充。只有那些在水平方向定位x值在150到350之间的图形会使用蓝绿渐变色来填充。

　　具体来看下面的代码，这里绘制了5个矩形，并用上面所说的渐变来填充它们，让我们来看看效果：

var linearGradient1 = context.createLinearGradient(150, 0, 350,0);

linearGradient1.addColorStop(0, 'rgb(0,   0, 255)');

linearGradient1.addColorStop(1, 'rgb(0, 255, 0)');

context.fillStyle = linearGradient1;

context.fillRect(10,10,130, 100);

context.fillRect(150,10, 200, 100);

context.fillRect(360,10, 130, 100);

context.fillRect(100,120, 150, 100);

context.fillRect(280,120, 150, 100);     

复制代码

　　从上面的结果可以看出，在渐变区域之外的图形仅会使用开始或结束颜色来填充。

　　渐变长度是非常重要的概念，需要大家仔细体会。只有掌握它才能在使用渐变是获得正确的结果。

　　径向渐变

　　径向渐变是一种圆形的颜色扩展模式，颜色从圆心位置开始向外辐射。下面是一个例子：

　　一个径向渐变于两个圆形来定义。每一个圆都有一个圆心和一条半径。下面是示例代码：

var x1 = 100;   // 第一个圆圆心的X坐标

var y1 = 100;   // 第一个圆圆心的Y坐标

var r1 = 30;    // 第一个圆的半径

var x2 = 100;   // 第二个圆圆心的X坐标

var y2 = 100;   // 第二个圆圆心的Y坐标

var r2 = 100;   // 第二个圆的半径

var radialGradient1 =

    context.createRadialGradient(x1, y1, r1, x2, y2, r2);

radialGradient1.addColorStop(0, 'rgb(0,   0, 255)');

radialGradient1.addColorStop(1, 'rgb(0, 255,   0)');

context.fillStyle = radialGradient1;

context.fillRect(10,10, 200, 200);      

复制代码

　　如上面的代码所示，这里有两个圆，圆心分别为x1,y1和x2,y2，它们的半径分别为r1和r2，这些值将作为参数传入到2D上下文的createRadialGradient()方法中。

　　这两个圆必须设置不同的半径，形成一个内圆和一个外圆。这样渐变色就从一个圆形辐射到另一个圆形。

　　颜色停止点会被添加到这两个圆形之间，例如上面的代码中，第一个颜色停止点中的参数0表示该颜色从第一个圆形开始，第二个颜色停止点中的参数1表示第二种颜色从第二个圆形开始。

　　下面是上面代码的返回结果：

　　如果两个圆形的圆心位置相同，那么径向渐变将是一个完整的圆形。如果两个圆的圆心位置不相同，那么径向渐变看起来就像是一个探照灯发出的光线。例如下面的样子：

var x1 = 100;

var y1 = 100;

var r1 = 30;

var x2 = 150;

var y2 = 125;

var r2 = 100;

var radialGradient1 = context.createRadialGradient(x1, y1, r1, x2, y2, r2);

radialGradient1.addColorStop(0, 'rgb(0,   0, 255)');

radialGradient1.addColorStop(1, 'rgb(0, 255,   0)');

context.fillStyle = radialGradient1;

context.fillRect(10,10, 200, 200);        

复制代码

　　得到的结构如下所示：

• 共3页:
• 上一页
• 1
• 2
• 3
• 下一页