首先，明確兩點，很多人的部落格在寫的時候，都是直接將圖片的路徑修改為網路路徑，然後就再也不理，因為他們覺得這樣是可以得，也許，這樣是錯的哦

第二點，騰訊的文件，最好跟著來，他不會跟你任何的擴充套件性的！！！！！！！！！！！！！！！！！！！！！！！！！

好了，先來段程式碼：

// pages/T-canvas/T-canvas.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    mysrc: "https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=4ed20bae4ba98226accc2375ebebd264/b17eca8065380cd734352b36a944ad34588281c6.jpg"
  },

  onShow: function () {
    const that=this;
    wx.downloadFile({
      url: that.data.mysrc,
      success: function (sres) {
        console.log(sres);
        that.data.mysrc = sres.tempFilePath
      },fail:function(fres){

      }
    })
  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  },
  click() {
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.drawImage(this.data.mysrc, 30, 30, 500, 800)
    ctx.drawImage(this.data.mysrc, 0, 0, 300, 200)
    ctx.drawImage(this.data.mysrc, 0, 0, 100, 200)
    ctx.draw();
  },
})
 

第一點，就是我們將這個圖片的https域名載入在downfile裡面了，這是第一點。

第二點，我們使用的圖片是先經過下載！然後再使用到canvas裡面！

第三點，手機有種就不要開除錯！我們要模擬最真實的環境

好，開始，執行後，我們點選程式碼，

圖片有點大。。。淡定。。可以看到，我們上面的程式碼的顯示是正常的，現在，我們來排除第三點，允許你開啟手機的除錯，當然，顯示之後是沒有多大變化的，所以說在下載了圖片的情況下，除錯時沒多大變化的，而不是說除錯對這個毫無影響！實際上如果不先下載，。不先去使用htttps的情況下，使用除錯還是可以達到圖片的那種效果的（怕碼字太多，後面各位大佬自己去做試驗）

第二點，現在，我們去關閉掉圖片下載這段程式碼。

結果是這樣的：

請不要想多，我真的已經按下那個按鈕了，所以說，我們需要先把圖片快取到本地，這時候，你開啟除錯的話麼肯定是上面這光景吧，為啥？自己去想咯

所以，我們得出結論，第一！需要快取（建議大家去改成使用getimageinfo，然後去使用快取地址試試）

第二部！我們要去使用https，還得要去配置在downfile裡面。真麻煩