網上有現成的例子，所以直接拿來用了，見連結，接下來說下自己遇到的問題

      ->  

因為在我的專案中，我的圖片是網路圖片，canvas上繪製的目前只支援本地圖片，那應該怎麼辦呢？不可能圖片是固定死的，所以只能另尋捷徑了，前端開發者應該對資源的載入比較熟悉，網頁上的圖片都是網路圖片，在顯示時都會暫存在本地，有的直接在快取中，可見chrome://cache/，所以我們在開啟這個頁面時，可以取網路圖片的本地路徑，剛好，微信小程式提供了該方法。。

wx.getImageInfo({
                    src:'https://avatar.csdn.net/D/4/C/3_sinat_36146776.jpg',//伺服器返回的帶引數的小程式碼地址
                    success: function (res) {
                        //res.path是網路圖片的本地地址
                        let qrCodePath = res.path;
                        that.setData({
                            localImageUrl:qrCodePath
                        })
                    },
                    fail: function (res) {
                        //失敗回撥
                    }
                });
 

使用

ctx.drawImage(this.data.localImageUrl, 0, 0.24*windowHeight, 0.8*windowWidth, 0.8*windowWidth);

最後在真機上成功顯示