小程序canvas 圆角框带填充颜色

//　ctx: 获取canvas的id  ---  const ctx = wx.createCanvasContext('canvasId')

//　x 横坐标　　y 纵左边　　w 框的宽度　　h 框的高度　　r 四个圆角的弧度　　c 背景颜色

//   canvasListLength : 类型为number。根据条件改变框的高度。可设置为：1或2或者3等等整数

 

roundRect(ctx, x, y, w, h, r, c = '#000',canvasListLength) {

    h = h * canvasListLength

    if (w < 2 * r) { r = w / 2; }

    if (h < 2 * r) { r = h / 2; }

    ctx.beginPath();

    ctx.fillStyle = c;

    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();

  }

 

对面的伙伴工作辛苦了！