最新版微信小程序用canvas画圆角矩形代码

以下是最新版微信小程序使用 canvas 画圆角矩形的代码示例：

const ctx = wx.createCanvasContext('myCanvas');

// 设置矩形圆角半径
const radius = 10;

// 获取矩形的宽度和高度
const width = 200;
const height = 100;

// 计算矩形四个角的圆心坐标
const x1 = radius;
const y1 = radius;
const x2 = width - radius;
const y2 = radius;
const x3 = width - radius;
const y3 = height - radius;
const x4 = radius;
const y4 = height - radius;

// 开始绘制路径
ctx.beginPath();

// 绘制左上角的圆弧路径
ctx.arc(x1, y1, radius, Math.PI, Math.PI * 1.5);

// 绘制上边线路径
ctx.moveTo(x1 + radius, y1);
ctx.lineTo(x2 - radius, y2);

// 绘制右上角的圆弧路径
ctx.arc(x2, y2, radius, Math.PI * 1.5, Math.PI * 2);

// 绘制右边线路径
ctx.lineTo(x3, y3 + radius);

// 绘制右下角的圆弧路径
ctx.arc(x3, y3, radius, 0, Math.PI * 0.5);

// 绘制下边线路径
ctx.lineTo(x4 + radius, y4);

// 绘制左下角的圆弧路径
ctx.arc(x4, y4, radius, Math.PI * 0.5, Math.PI);

// 绘制左边线路径
ctx.lineTo(x1, y1 + radius);

// 设置路径样式并闭合路径
ctx.setFillStyle('#f00');
ctx.fill();
ctx.closePath();

// 将绘制好的图形导出为图片
wx.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success(res) {
    console.log(res.tempFilePath);
  }
});

在上述代码中，我们首先使用 `wx.createCanvasContext` 方法创建了一个 canvas 绘图上下文对象，并设置了画布的 ID 为 `myCanvas`。然后，我们定义了矩形圆角半径、矩形的宽度和高度，以及四个圆角的圆心坐标。接着，我们使用 `ctx.beginPath()` 开始绘制路径，按照顺序绘制出左上角圆弧路径、上边线路径、右上角圆弧路径、右边线路径、右下角圆弧路径、下边线路径、左下角圆弧路径、左边线路径，并使用 `ctx.setFillStyle` 方法设置路径样式为红色。最后，我们使用 `wx.canvasToTempFilePath` 方法将绘制好的图形导出为图片，并输出导出的临时文件路径。