小程序 將圖片文字變成一整張圖片海報（判斷其中字符串寬度可通過計算字符串.length*字符寬度）

//test.xml
<canvas bindtap='showhaibao' canvas-id="myCanvas" style="width:{{canvasw}};height:{{canvash}};"/>

//test.js
data:{
    canvasw: '',
    canvash: ''
}

//獲取小程序碼
    wx.getSystemInfo({
        success: function (res) {
          that.setData({
            canvasw: res.windowWidth + 'px',
            canvash: res.windowHeight + 'px'
          })
        }
      })
      wx.request({
        url: rootDocment + '/a/fenxiang.json',
        // url: app.globalData.serverUrl + 'getChengXuMa',
        data: {
          id: options.id
        },
        success: function (res) {
          console.log(res.data.data.pic,"aaaaaaaaaaaaa")
          var res4 = res.data.data.pic//獲取小程序二維碼
          wx.downloadFile({
            url: res4,
            success: function (res) {
              var res3 = res.tempFilePath//小程序碼
              console.log(res.tempFilePath, "bbbbbbb")
              wx.downloadFile({
                url: options.pic,
                success: function (res) {
                  var res2 = res.tempFilePath//商品圖片碼
                  wx.getSystemInfo({
                    success: function (res) {
                      var w = res.windowWidth;
                      var h = res.windowHeight;
                      const ctx = wx.createCanvasContext('myCanvas')
                      ctx.setFillStyle('rgb(243, 243, 243)')
                      ctx.fillRect(0, 0, w, h)
                      ctx.drawImage(res2, (w - 180) / 2, 25, 180, 180)//商品圖
                      ctx.setTextAlign('center')
                      ctx.setFillStyle('rgb(43, 43, 43)')
                      ctx.setFontSize(18)
                      ctx.fillText(options.title, w / 2, 230)
                      ctx.setFillStyle('rgb(255, 0, 0)')
                      ctx.setFontSize(18)
                      ctx.fillText('￥' + options.price, w / 2, 255)
                      ctx.drawImage(res3, (w - 110) / 2, 325, 110, 110)//小程序二維碼
                      ctx.setFillStyle('rgb(43, 43, 43)')
                      ctx.setFontSize(14)
                      ctx.fillText('掃碼查看詳情', w / 2, 450)
                      ctx.draw();
                    }, fail: function (e) {
                      console.log(e)
                    }
                  })
                }
              })
            }
          });
        }
      })