效果图如下所示
.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 = this
wx.getSystemInfo({
success(res) {
console.log(res.windowWidth);
console.log(res.windowHeight);
that.setData({
deviceWidth: res.windowWidth,
deviceHeight: res.windowHeight,
})
}
})
},
})
.wxml
<canvas canvas-id="shareBox"></can
