canvas 加载网络图片遇到的问题

<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 ); 

 

 

 

}

}

可以成功显示