提示：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
如果觉得《圆头像 微信小程序 绘图_小程序canvas绘制圆形微信头像》对你有帮助，请点赞、收藏，并留下你的观点哦！
