在微信小程序中，可以利用API gradient（如何绘制渐变效果）实现颜色渐变的填充，不仅限于矩形、圆和线等基本图形，甚至文字也可以应用这种效果。

1. 创建渐变对象

我们提供了两种颜色渐变的方式：使用createLinearGradient(x, y, x1, y1)来创建一个线性的渐变，或者使用createCircularGradient(x, y, r)来创建一个从圆心开始的渐变。一旦创建出渐变对象，必须添加两个颜色渐变点。

2. 指定颜色渐变点

使用addColorStop(position, color)方法指定颜色渐变点的位置和颜色，其中位置参数必须位于0到1之间。

3. 应用渐变填充

可以使用setFillStyle()和setStrokeStyle()方法指定渐变对象，并进行相应的绘图描述，例如使用fillRect()或者strokeRect()方法。

具体应用示例：

使用 createLinearGradient()

const ctx = wx.createCanvasContext('myCanvas')

// 创建一个线性渐变
const grd = ctx.createLinearGradient(0, 0, 200, 0)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')

// 使用渐变填充矩形
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

使用 createCircularGradient()

const ctx = wx.createCanvasContext('myCanvas')

// 创建一个圆形渐变
const grd = ctx.createCircularGradient(75, 50, 50)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')

// 使用渐变填充矩形
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

以上便是利用微信小程序API gradient实现渐变效果的方法，开发者们可以根据自己的需求进行相应的绘图操作。