微信小程序的自定義組件中使用canvas在真機(jī)上不顯示繪制內(nèi)容

問題描述

小程序的自定義組件我使用了canvas繪制，在開發(fā)工具上可以顯示canvas繪制的內(nèi)容，但是在真機(jī)上不顯示，而在真機(jī)上打開調(diào)試又可以顯示，是什么原因？。

相關(guān)代碼

如下：
methods: {

openfun() {
  let that= this;
  wx.downloadFile({
    url: that.data.avatarUrl,
    success: function (res) {
      // console.log(res.tempFilePath);
      that.setData({
        avatarUrl:res.tempFilePath,
      })
      //繪圖方法
      that.drawImage();

    }, fail: function (fres) {

    }
  })
},
drawImage:function() {
  //繪制canvas圖片
  var that = this
  const ctx = wx.createCanvasContext('sharePhoto',this)
  // console.log(wx.getSystemInfoSync())
  var Width = wx.getSystemInfoSync().windowWidth*0.74
  var Height = wx.getSystemInfoSync().windowHeight * 0.68
  var bgPath = '/pages/images/nimg557_1.jpg'
  var bgPath2 = '/pages/images/nimg456_1.png'
  var avatarUrl = that.data.avatarUrl
  //繪制圖片
  ctx.drawImage(bgPath, 0, 0, Width, Height)
  ctx.drawImage(bgPath2, Width * 0.0897, Height*0.175, Width*0.818, Height*0.758)
  ctx.save();
  ctx.beginPath();
  ctx.arc(Width * 0.5, Height * 0.175, Width * 0.098, 0, 2 * Math.PI);
  ctx.clip();//畫了圓 再剪切
  ctx.drawImage(avatarUrl, Width * 0.4, Height * 0.109, Width*0.197, Height*0.132)
  ctx.restore();
  ctx.textAlign = "center";
  ctx.font = "16rpx Arial";
  ctx.fillStyle = "#333";
  ctx.fillText(that.data.nickName, Width * 0.5, Height * 0.293, Width * 0.818);
  ctx.save();
  ctx.draw()
},

你期待的結(jié)果是什么？實際看到的錯誤信息又是什么？

請問有沒有大神知道的？