微信小程序canvas绘制圆角边框

参考：

https://www.jb51.net/article/146092.htm

https://blog.csdn.net/CrazBarry/article/details/96149496

如下没有所谓锯齿问题，参考链接中说的锯齿可能是弧线跟直线交叉，或者边线重叠产生的。

  /**
   * 
   * @param {CanvasContext} ctx canvas上下文
   * @param {number} x 圆角矩形选区的左上角 x坐标
   * @param {number} y 圆角矩形选区的左上角 y坐标
   * @param {number} w 圆角矩形选区的宽度
   * @param {number} h 圆角矩形选区的高度
   * @param {number} r 圆角的半径
   */
  roundRect(ctx, x, y, w, h, r) {
    // 开始绘制
    ctx.setLineDash();
    ctx.save(); // 保存当前已绘制，不然后面绘制的都显示不了
    ctx.beginPath();
    ctx.setFillStyle('#fff');
    ctx.setStrokeStyle('#BEBEBE');
    // 左上角
    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
    // 右上角
    ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
    // 右下角
    ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
    // 左下角
    ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
    // border-left
    ctx.lineTo(x, y + r);

    ctx.fill();
    ctx.stroke();
    ctx.closePath();
    // 剪切
    ctx.clip();
    ctx.restore(); // 恢复clicp的绘制区域，后面的都能绘制
    ctx.draw(true);
  }

　　

效果截图：