渐变颜色填充方式有两种：线性或径向。
- 线性渐变填充会创建一个水平 、 垂直或者对角线的填充图案。
- 径向渐变填充会自中心点创建一个放射状填充图案。
1 线性渐变
1.1 线性水平渐变
（1）基本形状
Steve Fulton 与 Jeff Fulton 举了一个示例，来说明如何设置线性水平渐变。
//创建渐变对象
var gr = context.createLinearGradient(0, 0, 100, 0);
//颜色断点
gr.addColorStop(0, 'rgb(255,0,0)');
gr.addColorStop(.5, 'rgb(0,255,0)');
gr.addColorStop(1, 'rgb(255,0,0)');
//设置渐变
context.fillStyle = gr;
//绘制矩形
context.fillRect(0, 0, 100, 100);
运行结果：
首先使用 context 的 createLinearGradient() 来创建渐变对象。语法为：context.createLinearGradient(x0,y0,x1,y1);
| 参数 | 描述 |
|---|---|
| x0 | 渐变开始点的 x 坐标 |
| y0 | 渐变开始点的 y 坐标 |
| x1 | 渐变结束点的 x 坐标 |
| y1 | 渐变结束点的 y 坐标 |
Linear /ˈlɪniə(r)/
Of, relating to, or resembling a line; straight.
gradient /ˈɡreɪdiənt/
Physics The rate at which a physical quantity, such as temperature or pressure, changes relative to change in a given variable, especially distance.
四个入参都是坐标，目的是确定渐变的范围。
注意：因为需要创建的是一个水平渐变，所以 y 值都是 0。
渐变对象创建好之后，就可以设置色标。语法：gradient.addColorStop(stop,color);
| 参数 | 描述 |
|---|---|
| stop | 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。 |
| color | 在结束位置显示的 CSS 颜色值 |
可以多次调用 addColorStop() 方法来改变渐变。
比如示例代码中设置的渐变是起点 （0） 为红色 、 中心点 (0.5) 为绿色 、 终点 （1）为红色。所以最后的效果是出现一个 “ 红-绿-红 ” 渐变颜色。
为了说明渐变对象的影响范围，我们再添加两个矩形，一个窄，一个宽。
context.fillRect(0, 100, 50, 100);
context.fillRect(0, 200, 200, 100);
渲染结果：
从渲染结果中可以看出，只要有形状在水平渐变的垂直区域内，就会渲染出水平渐变效果。
综合运用这些方法，就可以做出非凡的彩虹效果。
var gr = context.createLinearGradient(0, 0, 300, 0);
gr.addColorStop(0, '#fff');
gr.addColorStop(0.15, '#8B00FF');
gr.addColorStop(0.25, '#0000FF');
gr.addColorStop(0.35, '#00FFFF');
gr.addColorStop(0.45, '#00FF00');
gr.addColorStop(0.55, '#FFFF00');
gr.addColorStop(0.65, '#FF7F00');
gr.addColorStop(0.75, '#FF0000');
gr.addColorStop(1, '#fff');
//生成渐变
context.fillStyle = gr;
context.fillRect(0, 0, 300, 300);
运行结果：
（2）边框
也可以对形状的边框应用渐变颜色。
var gr = context.createLinearGradient(0, 0, 100, 0);
gr.addColorStop(0, 'rgb(255,0,0)');
gr.addColorStop(.5, 'rgb(0,255,0)');
gr.addColorStop(1, 'rgb(255,0,0)');
context.strokeStyle=gr;
context.strokeRect(0,0,100,100);
context.strokeRect(0,100,50,100);
context.strokeRect(0,200,200,100);
运行结果：
这里的示例代码与之前示例的区别是：先把 strokeStyle 设置为渐变对象，接着调用 strokeRect() 来绘制边框。
stroke /strəʊk/
v.
To mark with a single short line.
（3）特殊形状
由点组成、封闭的特殊形状，也可以填充渐变颜色。只要形状的起止点相同，就是封闭的。
var gr = context.createLinearGradient(0, 0, 100, 0);
gr.addColorStop(0, 'rgb(255,0,0)');
gr.addColorStop(.5, 'rgb(0,255,0)');
gr.addColorStop(1, 'rgb(255,0,0)');
context.fillStyle = gr;
context.beginPath();
context.moveTo(0, 0);
context.lineTo(50, 0);
context.lineTo(100, 50);
context.lineTo(50, 100);
context.lineTo(0, 100);
context.lineTo(0, 0);
context.stroke();
context.fill();
context.closePath();
运行结果：
1.2 线性垂直渐变
（1）形状
线性垂直渐变与水平渐变类似，只不过 createLinearGradient() 中的 x 都为 0。
var gr = context.createLinearGradient(0, 0, 0, 300);
gr.addColorStop(0, '#fff');
gr.addColorStop(0.15, '#8B00FF');
gr.addColorStop(0.25, '#0000FF');
gr.addColorStop(0.35, '#00FFFF');
gr.addColorStop(0.45, '#00FF00');
gr.addColorStop(0.55, '#FFFF00');
gr.addColorStop(0.65, '#FF7F00');
gr.addColorStop(0.75, '#FF0000');
gr.addColorStop(1, '#fff');
context.fillStyle = gr;
context.fillRect(0, 0, 300, 300);
运行结果：
（2）边框
线性垂直渐变也可以应用与边框。
var gr = context.createLinearGradient(0, 0, 0, 100);
gr.addColorStop(0, 'rgb(255,0,0)');
gr.addColorStop(.5, 'rgb(0,255,0)');
gr.addColorStop(1, 'rgb(255,0,0)');
context.strokeStyle = gr;
context.beginPath();
context.moveTo(0, 0);
context.lineTo(50, 0);
context.lineTo(100, 50);
context.lineTo(50, 100);
context.lineTo(0, 100);
context.lineTo(0, 0);
context.stroke();
context.closePath();
运行结果：
（3）对角线
createLinearGradient() 方法中的起始点与终止点成斜 45 度对角，就可以做出对角线的渐变效果。当然也可以做成其它斜度。
var gr = context.createLinearGradient(0, 0, 100, 100);
gr.addColorStop(0, 'rgb(255,0,0)');
gr.addColorStop(.5, 'rgb(0,255,0)');
gr.addColorStop(1, 'rgb(255,0,0)');
context.fillStyle = gr;
context.beginPath();
context.moveTo(0, 0);
context.fillRect(0, 0, 100, 100);
context.closePath();
运行结果：
2 径向渐变
context 的 createLinearGradient() 方法可以创建放射状的径向渐变对象。
语法：context.createRadialGradient(x0,y0,r0,x1,y1,r1);
| 参数 | 描述 |
|---|---|
| x0 | 渐变的开始圆的 x 坐标 |
| y0 | 渐变的开始圆的 y 坐标 |
| r0 | 开始圆的半径 |
| x1 | 渐变的结束圆的 x 坐标 |
| y1 | 渐变的结束圆的 y 坐标 |
| r1 | 结束圆的半径 |
（1）基本形状
var gr = context.createRadialGradient(50, 50, 25, 50, 50, 100);
gr.addColorStop(0, 'rgb(255,0,0)');
gr.addColorStop(.5, 'rgb(0,255,0)');
gr.addColorStop(1, 'rgb(255,0,0)');
context.fillStyle = gr;
context.fillRect(0,0,200,200);
运行结果：
示例代码先在点 (50,50) 以半径为 25 长度，画出一个起始圆；接着在点 (50,50) 以半径为 100 长度，画出一个终止圆；最后在它们之间设置径向渐变。
如果终止圆的圆心在起始圆的圆心右下角，就会产生这样的效果。
context.createRadialGradient(50, 50, 25, 100, 100, 100);
（2）其它形状
除了对正方形应用径向渐变，也可以把径向渐变应用于其他形状的图形，比如圆形。
context.arc(100,100,100,(Math.PI/180)*0,(Math.PI/180)*360,false);
context.fill();
其他部分代码与上一例的代码相同。
运行结果：
（3）边框
也可以把径向渐变应用于边框。
context.strokeStyle = gr;
context.arc(100,100,50,(Math.PI/180)*0,(Math.PI/180)*360,false);
context.stroke();
其他部分代码与上一例的代码相同。
运行结果：
这里的圆会比前面示例中的圆小一半，这样才能得到径向渐变效果。
综合运用以上知识点，可以做出让人惊叹的效果。
var gr = context.createRadialGradient(50, 50, 25, 100, 100, 100);
gr.addColorStop(0, '#fff');
gr.addColorStop(0.15, '#8B00FF');
gr.addColorStop(0.25, '#0000FF');
gr.addColorStop(0.35, '#00FFFF');
gr.addColorStop(0.45, '#00FF00');
gr.addColorStop(0.55, '#FFFF00');
gr.addColorStop(0.65, '#FF7F00');
gr.addColorStop(0.75, '#FF0000');
gr.addColorStop(1, '#fff');
context.fillStyle = gr;
context.fillRect(0, 0, 200, 200);
运行结果：
网友评论