小程序canvas绘制圆形微信头像

提醒：canvas画布绘画图片的时候，图片不能是互联网图片，必须是本地图片才可以正常绘制。

第一步：获取用户授权，下载微信头像图片到本地。

pleaseSign: function(event) {
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function(res) {
              let userInfo = res.userInfo;
              let userImage = userInfo.avatarUrl;
              wx.downloadFile({
                url: userImage,
                success(wr) {
                  let userName = userInfo.nickName;
                  app.gData.userName = userName;
                  app.gData.userImage = wr.tempFilePath;
                  wx.navigateTo({
                    url: '../sign/sign'
                  });
                }
              });
            }
          });
        }
      }
    });
  }

获取用户头像信息之后，跳转到绘制页面，在绘制页面完成绘画操作。

第二步：绘制用户头像。

finish: function() {
    const ctx = wx.createCanvasContext('shareCanvas');
    let that = this;
    ctx.drawImage(app.gData.BG, 0, 0, 600, 1066);
    ctx.stroke();

    ctx.save();
    // 绘制第一个圆 
    ctx.beginPath();
    //圆心x、y的坐标，半径，起始角，结束角，顺时针画
    ctx.arc(30 + that.data.xp - 70, 30 + that.data.yp - 30, 30, 0, Math.PI * 2, false);
    //将圆形剪切
    ctx.clip();
    //再画一个不存在的圆，避免画出来的微信头像有个黑圆圈
    ctx.beginPath();
    ctx.arc(0, 0, 0, 0, Math.PI * 2, false);
    ctx.drawImage(app.gData.userImage, that.data.xp - 70, that.data.yp - 30, 60, 60);
    ctx.stroke();
    ctx.restore();

    ctx.setTextAlign('left');
    ctx.font = 'bold 25px 楷体';
    ctx.setFillStyle(app.gData.fontColor);
    ctx.fillText(app.gData.userName, that.data.xp, that.data.yp + 10);
    ctx.stroke();
    ctx.draw(false, function () {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 600,
        height: 1066,
        destWidth: 600,
        destHeight: 1066,
        canvasId: 'shareCanvas',
        success: function (res) {
          // 获得图片临时路径
          app.gData.temp = res.tempFilePath;
          app.gData.change = true;
          wx.navigateBack();
        }
      });
    });
    
  }

注意：在绘制用户头像之前一定要调用save方法，绘制以后调用restore方法，否则你的绘制除了头像会成功画出来，其它绘画图片或者文字会出不来。

绘画好用户头像之后的图片是这样的：

2.png

这部分代码是我一个已经上线的小程序【心语一刻】的代码片段，大家可以搜一下这个小程序具体体验一下流程。

3.png love.png