<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 );
}
}
可以成功显示