在微信小程序的 Canvas 绘图中，你可以使用线性渐变（Linear Gradient）为图形添加颜色渐变效果。以下是创建线性渐变的基本步骤：

1. 创建 Canvas 组件：

   在 WXML 文件中添加 <canvas> 组件，为其设置唯一标识。
   <canvas canvas-id="myCanvas" style="width: 300px; height: 200px;"></canvas>

2. 获取 Canvas 绘图上下文：

   在对应的 Page 或 Component 中获取 Canvas 绘图上下文对象。
   Page({
     onReady: function() {
       const ctx = wx.createCanvasContext('myCanvas');

       // 在这里进行具体的绘图操作
     }
   });

3. 创建线性渐变对象：

   使用 createLinearGradient 方法创建线性渐变对象，并设置起始点 (x0, y0) 和结束点 (x1, y1)。
   const linearGradient = ctx.createLinearGradient(0, 0, 300, 0);

   上述代码表示从左上角 (0, 0) 到右上角 (300, 0) 的线性渐变。

4. 添加渐变色：

   使用 addColorStop 方法为渐变对象添加颜色。addColorStop 方法接受两个参数，第一个参数是表示渐变位置的值（0-1），第二个参数是颜色值。
   linearGradient.addColorStop(0, 'red');
   linearGradient.addColorStop(0.5, 'green');
   linearGradient.addColorStop(1, 'blue');

   上述代码表示在渐变的起始点（0）使用红色，中间点（0.5）使用绿色，结束点（1）使用蓝色。

5. 使用渐变填充或描边图形：

   将创建好的线性渐变对象应用到 setFillStyle 或 setStrokeStyle 中，然后进行绘图操作。
   ctx.setFillStyle(linearGradient);
   ctx.fillRect(10, 10, 280, 180);

   在这个示例中，使用线性渐变填充一个矩形。

以下是一个完整的示例，演示了如何创建线性渐变并应用到矩形填充中：
Page({
  onReady: function() {
    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();
  }
});




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