小程式中，canvas繪製圖片，可使用drawImage方法，但是繪製網路圖片時，在手機端不會顯示，需要先將網路圖片下載到本地，然後用圖片的本地路徑繪製。如下虛擬碼：

function downLoadImg(netUrl, storageKeyUrl) {
    wx.getImageInfo({
      src: netUrl,    //請求的網路圖片路徑
      success: function (res) {
        //請求成功後將會生成一個本地路徑即res.path,然後將該路徑快取到storageKeyUrl關鍵字中
        wx.setStorage({
          key: storageKeyUrl,
          data: res.path,
        });

      }
    })
  }

downLoadImg(引數一，引數二)//呼叫如上方法
var headUrl = wx.getStorageSync(storageKeyUrl); //下面用canvas繪製頭像 
　const ctx = wx.createCanvasContext('myCanvas');

　var wxSys = wx.getSystemInfoSync();
　var screenScale = wxSys.screenWidth * 2 / 750;


ctx.save(); // 儲存當前ctx的狀態 
ctx.arc(screenScale * 182, screenScale * 355, screenScale * 22, 0, 2 * Math.PI, false); 
ctx.strokeStyle = '#e3e7e8'; ctx.stroke(); ctx.clip(); //裁剪上面的圓形 

if (typeof (headUrl) != 'undefined' && headUrl != '') { 
　　ctx.drawImage(headUrl, screenScale * 160, screenScale * 333, screenScale * 44, screenScale * 44); // 在剛剛裁剪的園上畫圖  
} 
ctx.restore(); // 還原狀態