在微信小程序的 Canvas 绘图中，你可以使用渐变效果，使绘制的图形或文本具有丰富的颜色过渡。Canvas 支持线性渐变和径向渐变两种类型。

以下是使用 CanvasContext API 进行渐变绘制的基本示例：

1. 线性渐变（Linear Gradient）：
   - 创建线性渐变对象：createLinearGradient(x0, y0, x1, y1)
   - 添加渐变色：addColorStop(stop, color)，其中 stop 是表示渐变位置的值（0-1），color 是颜色值。
   const ctx = wx.createCanvasContext('myCanvas');

   // 创建线性渐变对象
   const linearGradient = ctx.createLinearGradient(0, 0, 300, 0);

   // 添加渐变色
   linearGradient.addColorStop(0, 'red');
   linearGradient.addColorStop(0.5, 'green');
   linearGradient.addColorStop(1, 'blue');

   // 使用渐变填充矩形
   ctx.setFillStyle(linearGradient);
   ctx.fillRect(10, 10, 280, 180);

   // 绘制
   ctx.draw();

2. 径向渐变（Radial Gradient）：
   - 创建径向渐变对象：createRadialGradient(x0, y0, r0, x1, y1, r1)
   - 参数 (x0, y0, r0) 表示渐变起始圆的中心坐标和半径，(x1, y1, r1) 表示渐变结束圆的中心坐标和半径。
   - 添加渐变色：同样使用 addColorStop(stop, color)。
   const ctx = wx.createCanvasContext('myCanvas');

   // 创建径向渐变对象
   const radialGradient = ctx.createRadialGradient(150, 100, 0, 150, 100, 100);

   // 添加渐变色
   radialGradient.addColorStop(0, 'red');
   radialGradient.addColorStop(0.5, 'green');
   radialGradient.addColorStop(1, 'blue');

   // 使用渐变填充矩形
   ctx.setFillStyle(radialGradient);
   ctx.fillRect(10, 10, 280, 180);

   // 绘制
   ctx.draw();

以上是使用微信小程序 Canvas 绘图实现渐变效果的基本示例。你可以根据实际需求调整坐标、颜色和渐变的形状等参数。


转载请注明出处：http://www.zyzy.cn/article/detail/969/微信小程序