小程序 绘制圆角矩形和圆角图片

本文介绍了在小程序绘制海报中所要绘制圆角图片的一种方法

参数介绍

··
ctx : 是指获取到的当前小程序方法 方法如下

          <canvas canvas-id="DetailsshareCanvas" style="width: 600rpx;height:880rpx;position:relative;" catchtouchmove="myCatchTouch"></canvas> 
        var ctx = wx.createCanvasContext('DetailsshareCanvas');

·
img：所绘制的图片注意网络图片地址要用 wx.getImageInfo 进行加载后的格式
left 和 top：指要绘制的图片所在canvas 中的位置如下图点的位置
width 和 height ：是指图片的宽高
w：参数为小程序适配单位方法和详情看 https://blog.csdn.net/weixin_43365995/article/details/94392560
fillet ：为要绘制的圆角 半径
以下传值均为 宽为 750 标准的单位（指宽分为750份）

–

  /* 绘制圆角图片 */ 
  imgfillet(ctx, img, left, top, width, height, w, fillet) {
    //     ctx   图片  起始点X Y   图片宽  高   适配单位  圆角半径
    ctx.beginPath();
    ctx.save();
    left = left / 2 * w;
    top = top / 2 * w;
    width = width / 2 * w;
    height = height / 2 * w;
    fillet = fillet / 2 * w;
    ctx.setLineWidth(1);
    ctx.setStrokeStyle('#ffffff');
    ctx.moveTo(left + fillet, top);           // 创建开始点
    ctx.lineTo(left + width - fillet, top);          // 创建水平线
    ctx.arcTo(left + width, top, left + width, top + fillet, fillet); // 创建弧
    ctx.lineTo(left + width, top + height - fillet);         // 创建垂直线
    ctx.arcTo(left + width, top + height, left + width - fillet, top + height, fillet); // 创建弧
    ctx.lineTo(left + fillet, top + height);         // 创建水平线
    ctx.arcTo(left, top + height, left, top + height - fillet, fillet); // 创建弧
    ctx.lineTo(left, top + fillet);         // 创建垂直线
    ctx.arcTo(left, top, left + fillet, top, fillet); // 创建弧
    ctx.stroke(); // 这个具体干什么用的？
    ctx.clip();
    ctx.drawImage(img, left, top, width, height);
    ctx.restore();
    ctx.closePath();
  },

看完不懂或者有其他需求写不出来请留言博主必回