cavans 画圆角矩形

使用cavans 画圆角方法
可以调用该方法画一个有圆角的的矩形出来，仅此记录

 /**
  * 绘制圆角方形
  * @param {画布上下文} ctx  画布上下文
  * @param {画布信息} opt 
  *   opt = {
  *      left: 相对画布左边距离位置
  *      top: 相对画布顶部距离位置
  *      width: 宽度
  *      height: 高度
  *      radius: 圆角弧度
  *      background: 背景色
  *     }
  */
 function  setRadius (ctx, opt) {
        let x = opt.left || 0,
            y = opt.top || 0,
            w = opt.width || 100,
            h = opt.height || 100,
            r = opt.radius || 6;
        ctx.beginPath()
        // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
        ctx.setFillStyle('transparent')
        // ctx.setStrokeStyle('transparent')
        // 左上角
        ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
        // border-top
        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)
        // border-right
        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)
        // border-bottom
        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)
        // border-left
        ctx.lineTo(x, y + r)
        ctx.lineTo(x + r, y)
        ctx.fill()
        // 剪切
        ctx.clip()
        ctx.setFillStyle(opt.background || '#ffffff')
        ctx.fillRect(x, y, w, h);
        ctx.restore();
    }

参考文章 https://blog.csdn.net/weixin_43222302/article/details/100697356