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

好多吃的啊

已于 2022-11-10 18:24:53 修改

阅读量602

点赞数 3

文章标签：小程序

于 2021-06-16 16:27:00 首次发布

本文链接：https://blog.csdn.net/m0_50080847/article/details/127554601

版权

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

对面的伙伴工作辛苦了！