Wechat applet uses canvas drawing, round avatar, network background, text, dotted line, straight line

<canvas type="2d" id="shareCanvas0" style="height: 1196rpx;width:578rpx;position: fixed;z-index: -100; left: -99999rpx"></canvas>

// mapping 
getCanvas(index){
  var self=this;
  console.log(' mapping ')
  const query = wx.createSelectorQuery();
  query.select("#shareCanvas0")
      .fields({
        node: true,
        size: false
      }).exec((res) => {
    const canvas = res[0].node;
    const ctx = canvas.getContext('2d');
    canvas.width = 1144;
    canvas.height = 2392;
    self.setData({
      drawing: true,
    })
    new Promise(function (resolve) {

      //  Draw a background picture 
      wx.getImageInfo({
        src: self.data.posterBg, // Network picture 
        success(res) {
          const img = canvas.createImage();
          img.src = res.path;
          img.onload = () => {
            ctx.drawImage(img, 0, 0, 1144, 2392);
            resolve(true);
          }
        }
      })
    }).then(function () {
      return new Promise(function(resolve){
        //  Draw names 
        ctx.font ="500 56px Arial";
        ctx.fillStyle = '#343434';
        ctx.fillText(app.globalData.student.name, 260, 104)

        resolve(true);
      })

    }).then(function () {
      return new Promise(function(resolve){
        //  Draw names 
        ctx.font ="400 40px Arial";
        ctx.fillStyle = '#9A9A9A';
        ctx.fillText(' I invite you to experience the following physical fitness live class ～', 256, 176)
        resolve(true);
      })

    }).then(function () {
      return new Promise((resolve)=>{
        let posterimg=self.data.images[index].img;
        console.log(index, self.data.images)
        wx.getImageInfo({
          src: posterimg, // Network picture . Poster picture 
          success(res) {
            const img = canvas.createImage();
            img.src = res.path;
            img.onload = () => {
              ctx.drawImage(img, 36, 244, 1076, 1628);
              resolve(true);
            }
          }
        })
      })

    }).then(function () {
      return new Promise(function(resolve){
        //  Get QR code 
        shareQr().then(res=>{
          self.setData({
            base64Qr:'data:image/png;base64,' + res//base64 Two dimensional code 
          })
          //  Draw qr code 
          const qrImg = canvas.createImage();
          qrImg.src = self.data.base64Qr;
          qrImg.onload = () => {
            ctx.drawImage(qrImg, 784, 1976, 320, 320);
            resolve(true);
          }
          qrImg.onerror = (err) => {
            console.log(err);
            resolve(true)
          }
        })
      })

    }).then(function () {
      return new Promise(function(resolve){
        //  Draw a dotted line 
        ctx.save();
        ctx.setLineDash([3,6]);
        ctx.lineWidth = 4;
        ctx.strokeStyle = '#e3e3e3';

        ctx.beginPath();
        ctx.moveTo(96, 1936);
        ctx.lineTo(1040, 1936);
        ctx.stroke();

        resolve(true);
      })

    }).then(function () {
      return new Promise(function(resolve){
        //  Draw text 
        ctx.font ="500 56px Arial";
        ctx.fillStyle = '#343434';
        ctx.fillText(' Value experience ', 63.6, 2108)
        ctx.fillText(' element ', 480, 2108)
        ctx.font ="500 132px Arial";
        ctx.fillStyle = '#FF7A00';
        ctx.fillText('9.9', 300, 2108)

        ctx.font ="500 56px Arial";
        ctx.fillStyle = '#343434';
        ctx.fillText(' Experience value ', 63.6, 2276)

        ctx.font ="500 96px Arial";
        ctx.fillStyle = '#FF7A00';
        ctx.fillText('299', 300, 2276)

        ctx.font ="500 56px Arial";
        ctx.fillStyle = '#343434';
        ctx.fillText(' Yuan's live course ', 460, 2276)

        resolve(true);
      })

    }).then(function () {
      return new Promise(function(resolve){
        //  Sets the color of the line 
        ctx.save();
        ctx.beginPath();
        ctx.setLineDash([3,0]);
        ctx.strokeStyle = "#FF7A00";
        ctx.moveTo(300, 2240);
        //  Set the end coordinates of the line 
        ctx.lineTo(460, 2240);
        //  Set the thickness of the line 
        ctx.lineWidth = "4";
        //  Style both ends of the line （ Line cap ） butt | round | square
        ctx.lineCap = "round";
        //  Draw lines （ Draw a figure by tracing ）
        ctx.stroke();
        ctx.restore();
        resolve(true);
      })

    }).then(function () {
      //  Draw your head 
      return new Promise(function(resolve){//  Draw a round border for your avatar 
        let avatar = app.globalData.student.avatar || app.oss_pic_prefix_url + "/wechat/static/student.png"
        wx.getImageInfo({
          src: avatar, // Network picture 
          success(res) {
            const avatarImg = canvas.createImage();
            avatarImg.src = res.path;
            avatarImg.onload = () => {
              ctx.save();
              ctx.beginPath();
              ctx.arc(124, 116, 80, 0, Math.PI * 2, false);
              ctx.clip();
              ctx.drawImage(avatarImg, 44, 36, 160, 160);
              ctx.restore();
              // console.log(' Draw your head ')
              resolve(true);
            }
          }
        })
      })
    }).then(function () {
      return new Promise(function(resolve){
        // console.log(' Finished drawing , Convert to picture ')
        self.transferCanvasToImage(canvas, index)
        resolve(true);
      })

    }).catch((err) => {
      console.log(err)
      self.setData({
        drawing: false,
      })
      self.data.loading && wx.hideLoading()
    })
  })
},

// Export the content of the specified area of the current canvas to generate a picture of the specified size

transferCanvasToImage(canvas, index) {
  const self = this;
  wx.canvasToTempFilePath({
    canvas: canvas,
    success(res){
      console.log('canvas Share picture address ', res.tempFilePath)
      self.data.loading && wx.hideLoading()
      self.setData({
        loading: false,
        drawing: false
      })
        self.setData({ canvasImg0: res.tempFilePath})
      
    }
  })
},