微信小程序 canvas图片处理圆角

在微信小程序中，使用Canvas API可以方便地处理图片并添加圆角效果。以下是一个简单的步骤来实现图片的圆角处理：

1. 获取或创建canvas元素：首先，你需要获取一个`wx.createSelectorQuery().select('#your-canvas-id')`选择的Canvas节点，或者手动创建一个。

2. 设置Canvas大小和图片：使用`canvas.drawImage`方法将图片绘制到Canvas上，设置好Canvas的宽度和高度等于图片的尺寸。

const ctx = wx.createSelectorQuery().select('#your-canvas-id').context();
ctx.drawImage(img, 0, 0, img.width, img.height);

3. 添加圆角：使用`ctx.beginPath()`开始路径，然后调用`ctx.arcTo()`方法定义一个从当前点到目标点的弧线，这个方法可以帮助你轻松实现圆角效果。接着调用`ctx.arc()`方法画出圆形部分，最后用`ctx.closePath()`结束路径，`ctx.clip()`剪切当前路径内的区域。

// 假设你要在左上角和右下角各添加一个半径为10px的圆角
ctx.beginPath();
ctx.arcTo(0, 0, 10, 10, 10); // 左上角圆角
ctx.lineTo(img.width - 10, img.height - 10);
ctx.arcTo(img.width - 10, img.height - 10, img.width, img.height, 10); // 右下角圆角
ctx.closePath();
ctx.clip();

4. 绘制背景色或透明度：现在你可以根据需要填充背景颜色或者设置透明度，例如`ctx.fillStyle = '#fff'; ctx.fill();`。

// 如果你想填充白色背景
ctx.fillStyle = '#fff';
ctx.fill();

5. 保存到新图片：最后，你可以使用`wx.canvasToTempFilePath`方法将Canvas转换为临时文件，以便于分享或保存。

wx.canvasToTempFilePath({
    canvasId: 'your-canvas-id',
    success(res) {
        console.log('图片路径', res.tempFilePath);
    },
});