<canvas id="canvas" width="800" height="500">抱歉，您的瀏覽器不支援canvas元素</canvas>

之前是這樣寫的

var img = new Image();//表示嵌入一個影象物件例項

img.src = this.url;//表示獲取影象的URL 這裡的url為網路圖片地址

var canvas = document.getElementById("canvas"); 

if (canvas.getContext) {

         var context = canvas.getContext("2d");

         //獲取影象資源來將此影象繪製到畫布上

       img.onload = function(){//因為圖片載入時非同步的，要保證圖片載入後執行

                context.drawImage(img, 0, 0 , 800 , 500 ); //此時，起始座標為(0, 0)，以canvas的左上角為起始點

      }

}

上述程式碼出現錯誤

改正為

<canvas id="canvas" width="800" height="500">抱歉，您的瀏覽器不支援canvas元素</canvas>

<img id="img1" v-bind:src="url" hidden="hidden" />

this.url = 賦值一個網路圖片地址;

var canvas = document.getElementById("canvas");

var img1=document.getElementById("img1");

if (canvas.getContext) {

var context = canvas.getContext("2d");

//獲取影象資源來將此影象繪製到畫布上

img1.onload = function(){

context.drawImage(img1, 0, 0 , 800 , 500 ); 

}

}

可以成功顯示