小程序画布的使用

便于理解 现在拆分来一步步的看
点击保存按钮之后
第一步 定义出来画布的位置在一个看不见的位置
第二步 根据getImageInfo方法定义位置尺寸 大小 贴上图片
关键在于定时器的先后顺序 先铺设背景图 再在背景图上贴上自己需要的元素 这里需要用上定时器 保证图片层级在这里插入代码片关系的先后顺序,
下面展示一些 内联代码片。

SaveCard:function(){
    var that = this
    const ctx = wx.createCanvasContext('share');
    that.setData({
      loadingHidden: false
    })
    wx.getImageInfo({
          src: that.data.activeimage,
          success: function (res){        
            ctx.drawImage(res.path,0,0,375,812);
            ctx.setFontSize(18)
            ctx.fillStyle = '#f8e6b2'
            ctx.fillText(that.data.nickName,76,125)
            wx.getImageInfo({
              src: that.data.avatarUrl,   
              success: function (res){
                ctx.save()
                ctx.beginPath()
                ctx.arc(48,118,20,0,2*Math.PI)
                ctx.clip()
                ctx.drawImage(res.path, 28,98,40,40);
                ctx.restore()
                setTimeout(function(){
                  ctx.draw(false, function () {
                    that.setData({
                      loadingHidden: true
                      })
                      wx.canvasToTempFilePath({
                      canvasId: 'share',
                      success: function success(res) {
                      wx.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success(res) {
                          wx.showToast({
                            title: '保存图片成功！',
                          })
                        },
                        fail(res) {
                          wx.showToast({
                            title: '保存图片失败！',
                          })
                        }
                      })
                      
                      }, 
                      fail: function (e) {}
                      });
                  })    
                  },1000)
              }
            })
            that.setData({
              loadingHidden: false
            })
          }
        })
        that.setData({
          loadingHidden: true
        })
  },