微信小程序API 绘图·创建圆形渐变

在微信小程序的 Canvas 绘图中，你可以使用径向渐变（Radial 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. 创建径向渐变对象：

使用 createRadialGradient 方法创建径向渐变对象，并设置两个圆的中心点 (x0, y0) 和 (x1, y1)，以及两个圆的半径 r0 和 r1。

   const radialGradient = ctx.createRadialGradient(150, 100, 0, 150, 100, 100);

上述代码表示从半径为 0 的圆（第一个圆）到半径为 100 的圆（第二个圆）的径向渐变。

4. 添加渐变色：

使用 addColorStop 方法为渐变对象添加颜色。addColorStop 方法接受两个参数，第一个参数是表示渐变位置的值（0-1），第二个参数是颜色值。

   radialGradient.addColorStop(0, 'red');
   radialGradient.addColorStop(0.5, 'green');
   radialGradient.addColorStop(1, 'blue');

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

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

将创建好的径向渐变对象应用到 setFillStyle 或 setStrokeStyle 中，然后进行绘图操作。

   ctx.setFillStyle(radialGradient);
   ctx.fillRect(10, 10, 280, 180);

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

以下是一个完整的示例，演示了如何创建径向渐变并应用到矩形填充中：

Page({
  onReady: function() {
    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();
  }
});

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