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

我会带着你远行 2022-12-12 13:43 584阅读 0赞

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

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

## 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);

运行结果：

![60671fe8742df26a56ab8826f76ef95e.png][]

首先使用 context 的 createLinearGradient() 来创建渐变对象。语法为：`context.createLinearGradient(x0,y0,x1,y1);`

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x0</td> 
   <td>渐变开始点的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>y0</td> 
   <td>渐变开始点的 y 坐标</td> 
  </tr> 
  <tr> 
   <td>x1</td> 
   <td>渐变结束点的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>y1</td> 
   <td>渐变结束点的 y 坐标</td> 
  </tr> 
 </tbody> 
</table>

> 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);`

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>stop</td> 
   <td>介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>在结束位置显示的 CSS 颜色值</td> 
  </tr> 
 </tbody> 
</table>

可以多次调用 addColorStop() 方法来改变渐变。

比如示例代码中设置的渐变是起点 （0） 为红色 、 中心点 (0.5) 为绿色 、 终点 （1）为红色。所以最后的效果是出现一个 “ 红-绿-红 ” 渐变颜色。

为了说明渐变对象的影响范围，我们再添加两个矩形，一个窄，一个宽。

context.fillRect(0, 100, 50, 100);
    context.fillRect(0, 200, 200, 100);

渲染结果：

![af23b56a56a697fb6abc52ca503bc7b4.png][]

从渲染结果中可以看出，只要有形状在水平渐变的垂直区域内，就会渲染出水平渐变效果。

综合运用这些方法，就可以做出非凡的彩虹效果。

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

运行结果：

![491ef0248053150cf32abd7e46569dfa.png][]

**（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);

运行结果：

![b2b013b80eb5ba91b17f5d5828b57e61.png][]

这里的示例代码与之前示例的区别是：先把 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();

运行结果：

![ebd013a3725bb689b555f2fcdbd2b67e.png][]

### 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);

运行结果：

![c1216298e0cb5adbf98598c67124b703.png][]

**（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();

运行结果：

![d9db27702413049d9f1af6047c2f8eda.png][]

**（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();

运行结果：

![6453dddaeb062fa8ef2507e5af35a3f1.png][]

## 2 径向渐变 ##

context 的 createLinearGradient() 方法可以创建放射状的径向渐变对象。

语法：`context.createRadialGradient(x0,y0,r0,x1,y1,r1);`

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x0</td> 
   <td>渐变的开始圆的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>y0</td> 
   <td>渐变的开始圆的 y 坐标</td> 
  </tr> 
  <tr> 
   <td>r0</td> 
   <td>开始圆的半径</td> 
  </tr> 
  <tr> 
   <td>x1</td> 
   <td>渐变的结束圆的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>y1</td> 
   <td>渐变的结束圆的 y 坐标</td> 
  </tr> 
  <tr> 
   <td>r1</td> 
   <td>结束圆的半径</td> 
  </tr> 
 </tbody> 
</table>

**（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);

运行结果：

![875039d66318142ef643029131ab8091.png][]

示例代码先在点 (50,50) 以半径为 25 长度，画出一个起始圆；接着在点 (50,50) 以半径为 100 长度，画出一个终止圆；最后在它们之间设置径向渐变。

如果终止圆的圆心在起始圆的圆心右下角，就会产生这样的效果。

context.createRadialGradient(50, 50, 25, 100, 100, 100);

![f00646c7cbe0e33648c66ddc7024d8a1.png][]

**（2）其它形状**

除了对正方形应用径向渐变，也可以把径向渐变应用于其他形状的图形，比如圆形。

context.arc(100,100,100,(Math.PI/180)*0,(Math.PI/180)*360,false);
    context.fill();

其他部分代码与上一例的代码相同。

运行结果：

![71affd697fb99699d59c280df4049c25.png][]

**（3）边框**

也可以把径向渐变应用于边框。

context.strokeStyle = gr;
    
    context.arc(100,100,50,(Math.PI/180)*0,(Math.PI/180)*360,false);
    context.stroke();

其他部分代码与上一例的代码相同。

运行结果：

![3095628b401915fd4bfa4a8c36f27224.png][]

这里的圆会比前面示例中的圆小一半，这样才能得到径向渐变效果。

--------------------

综合运用以上知识点，可以做出让人惊叹的效果。

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

运行结果：

![3bf89e6463608336f125d34fcc5b5eb9.png][]

[60671fe8742df26a56ab8826f76ef95e.png]: /images/20221123/aff4ca416f48400dbb7c4eef5c87608a.png
[af23b56a56a697fb6abc52ca503bc7b4.png]: /images/20221123/96d54206c37b4c228e01a77a2fcf4046.png
[491ef0248053150cf32abd7e46569dfa.png]: /images/20221123/0d767b4a5d31401b9d6cf656264e4859.png
[b2b013b80eb5ba91b17f5d5828b57e61.png]: /images/20221123/81994c8be31b4001924b217f11e05aed.png
[ebd013a3725bb689b555f2fcdbd2b67e.png]: /images/20221123/03e72964b6df4aa7ab3bac02ed7f1a5b.png
[c1216298e0cb5adbf98598c67124b703.png]: /images/20221123/c316bb0f0593411d82a671228c22c0af.png
[d9db27702413049d9f1af6047c2f8eda.png]: /images/20221123/eb6989fe21f041f49077b52f9fad1a07.png
[6453dddaeb062fa8ef2507e5af35a3f1.png]: /images/20221123/fb99dba3ac5e45f7bbd764be6163c589.png
[875039d66318142ef643029131ab8091.png]: /images/20221123/4bded5d4853b4edcbd1c02d6465937be.png
[f00646c7cbe0e33648c66ddc7024d8a1.png]: /images/20221123/6caa68d6c3c14accad3ab492701b108e.png
[71affd697fb99699d59c280df4049c25.png]: /images/20221123/7be9e50c06d14052b3f4ec1cf8afe28f.png
[3095628b401915fd4bfa4a8c36f27224.png]: /images/20221123/cb4d4996ff7e466f902bb08b6892fa04.png
[3bf89e6463608336f125d34fcc5b5eb9.png]: /images/20221123/28c746b86e9a44138f5c931d6b79c7fd.png