通过前面的Canvas学习，了解到在Canvas中绘制图形时，使用strokeStyle和fillStyle来设置绘制图形的边框颜色和填充颜色。前面的教程我们看到的都是给这两个属性设置具体的颜色值，比如#fff、red之类。其实在Canvas中，除了给strokeStyle和fillStyle设置颜色之外，还可以设置渐变色。今天我们要学习的就是Canvas中的渐变知识。

Canvas中的渐变和CSS的渐变也有点类似，分为线性渐变和径向渐变（也被称之为扩散性渐变）。CanvasRenderingContext2D对象中提供了两个方法：

• CanvasRenderingContext2D.createLinearGradient()：创建线性渐变
• CanvasRenderingContext2D.createRadialGradient()：径向渐变

那么在Canvas中如何使用渐变的方法，给绘制的图形或文本增强效果。

线性渐变

在Canvas中首先使用createLinearGradient()创建一个新的CanvasGradient对象，然后将它赋值给一个变量，这样就可以将变量运用给strokeStyle和fillStyle。createLinearGradient()使用语法如下：

ctx.createLinearGradient(x1, y1, x2, y2)

也就是说createLinearGradient()方法接受四个参数，分别代表渐变的起始点(x1, y1)和渐变终点(x2, y2)。起点和终点描述了所绘制渐变效果的长度、位置和方向。

前面也说过了，Canvas中的渐变和CSS的渐变非常类似，上面的内容我们只是通过createLinearGradient()创建了CanvasGradient对象，但并没有渐变的颜色，要是没有颜色，对于这个对象而言就没有太多的意义了。所以，在Canvas中，可以通过addColorStop来定义渐变的颜色。

addColorStop是Canvas中制作渐变效果不可缺少的一个属性，其使用语法如下：

gradient.addColorStop(position, color)

也就是说addColorStop接受两个参数：

• position：指定渐变中颜色所在的相对位置，其接受一个0至1之间的值
• color：指定渐变中的颜色

我们来看一个简单的例子：