微信小程序实现canvas画圆形微信头像-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序实现canvas画圆形微信头像。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.需要获取用户信息，拿到用户头像图片

    wx.getUserProfile({
      desc: '用于生成海报', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        wx.downloadFile({
          url: res.userInfo.avatarUrl,
          success (res) {
            if (res.statusCode === 200) {
              this.setData({
                file_avatar:res.tempFilePath //拿到图片本地地址
              })
            }
          }
        })
      }
    })

2.实例化一个canvas对象,绘制出圆形并将头像固定到圆形中心位置

let ctx = wx.createCanvasContext('myCanvas', this)
this.circleAvatar(ctx, this.data.file_avatar, rpx2px(150),rpx2px(150),25);

  circleAvatar(ctx, img, x, y, r){
    // 如果在绘制图片之后还有需要绘制别的元素，需启动 save() 、restore() 方法，否则 clip() 方法会        
    // 导致之后元素都不会被渲染出来
    // save()：保存当前 Canvas 画布状态
    // restore()：恢复到保存时的状态
    // ctx：实例化canvas对象
    // img：图片地址
    // x：圆形中心点x坐标
    // y：圆形中心点y坐标
    // r：圆形半径
    ctx.save()
    let d = r * 2;
    let cx = x - r;
    let cy = y - r;
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.strokeStyle = '#fff'; // 设置绘制圆形边框的颜色
    ctx.stroke(); // 绘制出圆形，默认为黑色，可通过 ctx.strokeStyle = '#FFFFFF'，设置想要的颜色
    ctx.clip();
    ctx.drawImage(img, cx, cy, d, d);
    ctx.restore();
  },

3.实现效果

canvas 画圆形头像,微信小程序,小程序,前端