在canvas中有哪些渐变

1. 简介

Canvas是HTML5提供的一个新的绘图标签，通过它可以将JavaScript代码画出各种图形。正因为如此，Canvas也被称为HTML5绘图API。在Canvas中，渐变是一种十分常见的绘图技巧，它可以让图形呈现出非常漂亮的颜色渐变效果。本文将会详细介绍Canvas中的渐变类型和实现方法。

2. 线性渐变

2.1 实现方法

线性渐变是一种从一个点到另一个点之间的渐变，这个过程中颜色会从一种颜色平滑过渡到另一种颜色。在Canvas中，线性渐变可以通过LinearGradient对象来实现。首先创建一个LinearGradient对象，然后设置起始点和结束点，最后添加颜色点即可实现线性渐变效果。

var gradient=context.createLinearGradient(x0,y0,x1,y1);
gradient.addColorStop(0,"#000000");
gradient.addColorStop(0.5,"#ffffff");
gradient.addColorStop(1,"#000000");
context.fillStyle=gradient;

上述代码中，createLinearGradient方法用于创建渐变对象，其中(x0, y0)代表起点坐标，(x1, y1)代表终点坐标。在设置颜色点时，使用addColorStop方法，第一个参数代表该颜色点的位置（0到1之间），第二个参数代表该颜色点的颜色。最后，使用fillStyle属性将渐变对象赋给颜色，即可实现渐变填充效果。

2.2 实例演示

下面是一个使用线性渐变填充画布的示例，通过调节起点和终点坐标，调整渐变的方向和长度，同时设计不同的颜色点，可以得到不同的线性渐变效果：

<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var gradient=context.createLinearGradient(0,0,400,400);
gradient.addColorStop(0,"#9b4dca");
gradient.addColorStop(0.5,"#f96e2e");
gradient.addColorStop(0.8,"#f9a82e");
gradient.addColorStop(1,"#9bca4d");
context.fillStyle=gradient;
context.fillRect(0,0,400,400);
</script>

效果如下图所示：

3. 径向渐变

3.1 实现方法

径向渐变是一种以一个点为中心向周围辐射的渐变，也就是从内向外逐渐改变颜色。在Canvas中，可以使用RadialGradient对象来实现径向渐变效果。首先创建一个RadialGradient对象，然后设置起始圆和结束圆，最后添加颜色点即可实现径向渐变效果。

var gradient=context.createRadialGradient(x0,y0,r0,x1,y1,r1);
gradient.addColorStop(0,"#ffffff");
gradient.addColorStop(1,"#000000");
context.fillStyle=gradient;

与线性渐变类似，createRadialGradient方法用于创建渐变对象，其中(x0, y0, r0)代表起始圆心坐标和半径，(x1, y1, r1)代表终止圆心坐标和半径。在设置颜色点时，使用addColorStop方法，第一个参数代表该颜色点的位置（0到1之间），第二个参数代表该颜色点的颜色。最后，使用fillStyle属性将渐变对象赋给颜色，即可实现渐变填充效果。

3.2 实例演示

下面是一个使用径向渐变填充画布的示例，通过调节起始圆和结束圆的位置和大小，设计不同的颜色点，可以得到不同的径向渐变效果：

<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var gradient=context.createRadialGradient(200,200,50,200,200,200);
gradient.addColorStop(0,"#9b4dca");
gradient.addColorStop(0.5,"#f96e2e");
gradient.addColorStop(0.8,"#f9a82e");
gradient.addColorStop(1,"#9bca4d");
context.fillStyle=gradient;
context.fillRect(0,0,400,400);
</script>

效果如下图所示：

4. 纹理填充

4.1 实现方法

纹理填充是一种以纹理图形作为填充图案的渐变，可以让图形呈现出更加复杂的效果。在Canvas中，可以使用createPattern方法创建一个纹理图案，并将其赋给fillStyle属性即可实现纹理填充效果。

var img=new Image();
img.src="pattern.jpg";
img.onload=function(){
  var pattern=context.createPattern(img,"repeat");
  context.fillStyle=pattern;
  context.fillRect(0,0,400,400);
};

上述代码中，先创建一个Image对象，然后通过onload方法在图像加载完成后再执行后续操作。创建一个createPattern对象，第一个参数传入加载完成的Image对象，第二个参数代表纹理填充的方式，这里使用"repeat"表示重复填充。最后，将createPattern对象赋给fillStyle属性，即可实现纹理填充效果。

4.2 实例演示

下面是一个使用纹理填充画布的示例，首先将一张图像作为纹理图案，然后将其重复填充整个画布，可以得到纹理填充的效果：

<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var img=new Image();
img.src="https://s3.ax1x.com/2021/03/16/6cGK34.jpg";
img.onload=function(){
  var pattern=context.createPattern(img,"repeat");
  context.fillStyle=pattern;
  context.fillRect(0,0,400,400);
};
</script>

效果如下图所示：

5. 渐变的复杂应用

5.1 多种类型渐变叠加实现

在Canvas中，可以将多个渐变类型叠加在一起。下面是一个实现了线性渐变和径向渐变的复杂应用：

<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var linearGradient=context.createLinearGradient(0,0,400,400);
linearGradient.addColorStop(0,"rgba(0,155,255,0.6)");
linearGradient.addColorStop(0.5,"rgba(255,255,0,0.6)");
linearGradient.addColorStop(1,"rgba(255,0,155,0.6)");
var radialGradient=context.createRadialGradient(200,200,50,200,200,200);
radialGradient.addColorStop(0,"rgba(255,0,155,0.2)");
radialGradient.addColorStop(1,"rgba(0,155,255,0.2)");
context.fillStyle=linearGradient;
context.fillRect(0,0,400,400);
context.fillStyle=radialGradient;
context.fillRect(0,0,400,400);
</script>

首先定义一个线性渐变，从左上角到右下角，颜色分别为蓝色、黄色和粉红色，设置不透明度为0.6。然后定义一个径向渐变，以画布中心为圆心，半径为200，颜色从粉红色到蓝色，设置不透明度为0.2。最后分别使用fillStyle属性将两个渐变对象赋给颜色，将画布填充两次，即可实现双重渐变效果。

效果如下图所示：

5.2 渐变文本

Canvas中，除了可以用渐变来填充矩形和圆形，还可以用渐变来填充文本。下面是一个将文字填充渐变的示例：

<canvas id="canvas" width="400" height="200"></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var gradient=context.createLinearGradient(0,0,400,0);
gradient.addColorStop(0,"red");
gradient.addColorStop(0.5,"yellow");
gradient.addColorStop(1,"blue");
context.font="bold 60px Arial";
context.fillStyle=gradient;
context.fillText("Canvas渐变",0,100);
</script>

首先创建一个线性渐变，颜色从红色到蓝色，文字填充使用fillStyle属性赋给渐变对象。然后设置字体样式为粗体60px，使用fillText方法将文字"Canvas渐变"填充到画布中央，即可实现渐变文字效果：

效果如下图所示：

6. 总结

Canvas中的渐变是一种非常常用的绘图技巧，可以让图形呈现出非常漂亮的颜色渐变效果。本文介绍了Canvas中的线性渐变、径向渐变和纹理填充等渐变类型，并且介绍了如何将多种不同的渐变类型叠加使用，并用渐变填充文本。通过本文的介绍，相信读者已经掌握了Canvas中渐变的实现方法和应用场景。