调用drawImage()在<canvas>不显示图像的问题及解决方案

2,729 阅读1分钟

问题描述

 初学红宝书中的canvas标签,在学到drawImage方法的时候,根据书上的代码敲了一遍但在自己的canvas中显示不出图像。

 书中代码:

var image=document.images[0];
context.drawImage(image,10,10);

  照着敲到了自己的代码中,结果canvas中始终是一片空白。

原因

 百度之后,得出原因:等图片加载成功后才可以绘制,当图片未加载成功时使用drawImage(),不会被调用,绘制会失败。

解决方案

 1.当图像使用img标签时:

<body>
<canvas id="drawing" width="300" height="300"></canvas>
<img src="mc.png" id="image">
</body>

 使用window.onload监听图像是否加载成功,加载成功后才调用drawImage()

window.onload=function(){
    var image=document.getElementById("image");
    var drawing=document.getElementById("drawing");
    var context=drawing.getContext("2d");
    context.drawImage(image,0,0);
}

 2.当使用new Image()创建图像对象时,监听图像对象本身是否加载成功。

var drawing=document.getElementById("drawing");
var context=drawing.getContext("2d");
var image=new Image();
image.src="mc.png";
image.onload=function(){
    context.drawImage(image,0,0);
}

效果

drawImage()

参考文档
www.cnblogs.com/padding1015…

第一次写技术博客,有不好的地方还请大家包涵~