ctx.save()

        const drawRoundedRect = (ctxP, x, y, width, height, radius) => {
          ctxP.beginPath()
          ctxP.moveTo(x + radius, y)
          ctxP.lineTo(x + width - radius, y)
          ctxP.arc(x + width - radius, y + radius, radius, 1.5 * Math.PI, 2 * Math.PI)
          ctxP.lineTo(x + width, y + height - radius)
          ctxP.arc(x + width - radius, y + height - radius, radius, 0, 0.5 * Math.PI)
          ctxP.lineTo(x + radius, y + height)
          ctxP.arc(x + radius, y + height - radius, radius, 0.5 * Math.PI, 1 * Math.PI)
          ctxP.lineTo(x, y + radius)
          ctxP.arc(x + radius, y + radius, radius, 1 * Math.PI, 1.5 * Math.PI)

          ctxP.fillStyle = '#ffffff'
          ctxP.fill()
          ctxP.closePath()
        }
        drawRoundedRect(ctx, 0, 0, width, height, borderRadius)

        ctx.restore()

        const circleImg = (ctxW, img, x, y, r) => {
          ctxW.save()
          const d = 2 * r
          const cx = x + r
          const cy = y + r
          ctxW.arc(cx, cy, r, 0, 2 * Math.PI)
          ctxW.clip()
          ctxW.drawImage(img, x, y, d, d)

          ctxW.restore()
        }
        circleImg(ctx, res.path, 77, 16, 12)

        上面代码中，调用drawRoundedRect方法 会造成下面的clip失效，如果不用drawRoundedRect则是可以的