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/980/微信小程序