使用canvas绘制圆角矩形和圆角图片

// 实现图片圆角并且带有圆角白色边框的demo
const ctx = uni.createCanvasContext('myCanvas')
ctx.setFillStyle('#FFF');
this.roundRect(
  ctx,
  parseInt(this.divWidth * 0.21),
  parseInt(this.divHeight * 0.4),
  parseInt(this.divWidth * 0.581),
  parseInt(this.divHeight * 0.276),
  6
)
ctx.save()
this.roundRect(
  ctx,
  parseInt(this.divWidth * 0.217),
  parseInt(this.divHeight * 0.404),
  parseInt(this.divWidth * 0.568),
  parseInt(this.divHeight * 0.266),
  6
)
ctx.clip()
ctx.drawImage(
  locationImgSrc,
  parseInt(this.divWidth * 0.217),
  parseInt(this.divHeight * 0.404),
  parseInt(this.divWidth * 0.568),
  parseInt(this.divHeight * 0.266)
)
ctx.restore();
ctx.draw();

/* 绘制圆角的函数
    ctx - canvas实例
    x  -  x坐标
    y  -  y坐标
    w  -  绘制的矩形宽度
    h  -  绘制的矩形高度
    r  -  圆角弧度
*/
function roundRect(ctx,x, y, w, h, r) {
    if (w< 2 * r) r = w / 2;
    if (h < 2 * r) r = h / 2;
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.arcTo(x + w, y, x + w, y + h, r);
    ctx.arcTo(x + w, y + h, x, y + h, r);
    ctx.arcTo(x, y + h, x, y, r);
    ctx.arcTo(x, y, x + w, y, r);
    ctx.closePath();
    ctx.setFillStyle('#fff');
    ctx.fill()
},