【避坑指“难”】小程序canvas绘制矩形圆角边框

• ctx：canvas上下文
• x：圆角矩形选区的左上角 x坐标
• y：圆角矩形选区的左上角 y坐标
• w：圆角矩形选区的宽度
• h：圆角矩形选区的高度
• r：圆角的半径

  getArcCanvas(ctx, x, y, w, h, r) {
    
    
    ctx.beginPath()
    ctx.setFillStyle('#fff')
    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
    ctx.moveTo(x + r, y)
    ctx.lineTo(x + w - r, y)
    ctx.lineTo(x + w, y + r)
    ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
    ctx.lineTo(x + w, y + h - r)
    ctx.lineTo(x + w - r, y + h)
    ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
    ctx.lineTo(x + r, y + h)
    ctx.lineTo(x, y + h - r)
    ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
    ctx.lineTo(x, y + r)
    ctx.lineTo(x + r, y)
    ctx.fill()
    ctx.closePath()
    ctx.clip()
  },