说说在 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);

运行结果：