微信小程序海報功能（canvas）- - -附效果圖

效果圖如下所示

.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,
        })
      }
    })
  },
})

海報如果在真機上不顯示可以參考：https://blog.csdn.net/qq_43764578/article/details/101704775


對你有幫助的話記得收藏點贊，有什麼問題歡迎評論留言。