说说在 Canvas 中如何填充渐变颜色

渐变颜色填充方式有两种：线性或径向。

线性渐变填充会创建一个水平、垂直或者对角线的填充图案。
径向渐变填充会自中心点创建一个放射状填充图案。

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ə®/
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);

运行结果：