小程序 canvas画布圆角

小程序Canvas画布圆角主要是通过设置`arcTo()`方法来实现的。这个方法允许你在Canvas上绘制一条从当前点开始、沿着指定路径结束并带有指定半径的圆弧。以下是创建圆形边框的基本步骤：

1. **初始化Canvas**：
首先，在小程序的WXML文件中声明一个`canvas`组件，并给它绑定JavaScript中的事件处理函数。

<view class="container">
  <canvas id="myCanvas" bindtap="onCanvasTouch"></canvas>
</view>

2. **获取Canvas上下文**：
在JavaScript里，你需要通过`wx.createSelectorQuery().select('#myCanvas')`获取到Canvas的实例，然后获取其`context`。

Page({
  ...
  onCanvasTouch: function(e) {
    const ctx = wx.createSelectorQuery()
      .select('#myCanvas')
      .fields({
        node: true,
        size: true,
      })
      .exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
      });
  }
  ...
})

3. **绘制圆角矩形**：
使用`ctx.arcTo(x1, y1, x2, y2, radius)`方法，其中`(x1, y1)`是起点，`(x2, y2)`是终点，`radius`是圆角半径。例如，如果你想画一个顶部有圆角的矩形：

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50); // 底部直线
ctx.arcTo(200, 75, 200, 150, 25); // 上方圆角部分
ctx.lineTo(50, 150); // 左侧直线
ctx.closePath(); // 关闭路径
ctx.stroke(); // 绘制边框