我爱小程序
用户头像到真机上就成正方形了 模拟器是圆形
var ctx = wx.createCanvasContext('canvas',this); wx.showLoading({ title: '加载中...', mask: false }); // 背景 ctx.drawImage(this.canvasImg, 0, 0, 300, 450); ctx.globalAlpha = 0.82; // 透明度 ctx.setFillStyle('#FFF'); ctx.fillRect(20, 60, 260, 370); // ----------用户名---------- console.log('用户名',this.nickname) ctx.setFontSize(13); ctx.setFillStyle('#000'); ctx.fillText(this.nickname, 90, 110,80); ctx.setFontSize(13); ctx.setFillStyle('#666'); ctx.fillText('邀请您', 170, 110); // ----------小程序码---------- ctx.setFontSize(11); ctx.setFillStyle('#666'); ctx.font = 'normal' ctx.fillText('长按保存分享', 120, 410); ctx.fillText('扫码进入小程序', 115, 425); wx.getImageInfo({ src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567831501629&di=f179dc5dd0c0d3f31fd3c4594f99da09&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fcq%2Ftransform%2F300%2Fw550h550%2F20180506%2FMh5--hacuuvt8578898.png', success: (res) => { console.log('小程序码',res.path) ctx.restore(); ctx.drawImage(res.path, 120, 325, 65, 65); // ctx.save(); } }) // ----------标题---------- ctx.setFillStyle('#000'); ctx.font = 'normal bold 18px sans-serif'; textHandle(this.details.new_title, 40, 145, 220, 30); // ----------图片--------图片路径转为本地路径 wx.getImageInfo({ src: this.details.new_cover, success: (res) => { ctx.restore(); ctx.drawImage(res.path, 40, 190, 220, 100); ctx.draw(); } }) ctx.setLineDash([9, 6]); ctx.moveTo(43, 310); ctx.lineTo(260,310); ctx.strokeStyle="#000"; ctx.stroke(); // 保存当前的绘图上下文 ctx.save(); // ----------用户头像---------- ctx.beginPath(); ctx.arc(150, 60, 30, 0, 2 * Math.PI, false); ctx.strokeStyle="#FFF"; ctx.setLineDash([0,0]); ctx.lineWidth = 2; ctx.fillStyle = '#fff'; ctx.stroke(); ctx.clip(); // 将头像路径转为本地路径 wx.getImageInfo({ src: this.avatar_url, success: (res) => { console.log('头像',res.path) ctx.drawImage(res.path, 120, 30, 60, 60); } }) |