效果图如下所示
.wxml
<canvas canvas-id="shareBox"></canvas>
.wxss
canvas{width: 100%;height: 100vh;overflow: hidden;}
.js
Page({data: {deviceWidth:'',deviceHeight:'',},onShow:function(e){//绘制canvas图片var that = this;var imgLogo = '/images/userprofile.png'; //微信头像本地路径var bgimg = "/images/mastergraph.png"; //背景图var qrcode = "/images/qrcode.png";//二维码const ctx = wx.createCanvasContext('shareBox', this);ctx.setFillStyle("white");var deviceWidth = that.data.deviceWidth; //宽var deviceHeight = that.data.deviceHeight; //高ctx.fillRect(0, 0, deviceWidth, deviceHeight);// 绘制背景图ctx.drawImage(bgimg, 10, 10, deviceWidth - 20, deviceHeight - 110);//绘制底部背景颜色ctx.setFillStyle('#fff')ctx.fillRect(0, deviceHeight - 100, deviceWidth, 100);//绘制微信名称ctx.setFontSize(15);ctx.setFillStyle('#000');ctx.setTextAlign('left');ctx.fillText("林晨：", 110, deviceHeight - 55);//绘制分享标题ctx.setFontSize(15);ctx.setFillStyle('#000');ctx.setTextAlign('left');ctx.fillText("邀请您一起参加", 110, deviceHeight - 35);// 绘制二维码ctx.drawImage(qrcode,deviceWidth - 100, deviceHeight - 90, 80, 80);//绘制圆形头像ctx.save();ctx.beginPath();ctx.arc(60, deviceHeight - 50, 35, 0, 2 * Math.PI, false);ctx.setStrokeStyle('#eee')ctx.stroke(); //画了背景的话要先画圆在裁剪才能有圆形图片ctx.clip(); //裁剪ctx.drawImage(imgLogo, 20, deviceHeight - 85, 80, 80);ctx.restore();ctx.draw(); },onLoad: function (options) {let that = thiswx.getSystemInfo({success(res) {console.log(res.windowWidth);console.log(res.windowHeight);that.setData({deviceWidth: res.windowWidth,deviceHeight: res.windowHeight,})}})},})
海报如果在真机上不显示可以参考：/qq_43764578/article/details/101704775
对你有帮助的话记得收藏点赞，有什么问题欢迎评论留言。
