起因:
在使用canvas绘制图片时,发现根据w3cschool里面的绘制代码绘制图片显示不出来。
示例代码如下:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
</script>
自己的模仿代码如下:
// 绘制图片
function drawImg(){
var img = new Image();
img.src = "ic_animal.png";
console.log("path is "+img.src)
ctx.drawImage(img, 0,0,100, 100);
}
原因:
img.src加载图片需要时间,虽然img对象已经赋值成功,但是图片还没有加载完成。这时立即调用canvas里的drawImage是绘制不出来的。
解决方法:
正确的做法是给img的src赋值后,使用onload监听加载图片情况,加载完成后再绘制。
代码如下:
// 绘制图片
function drawImg(){
var img = new Image();
img.src = "ic_animal.png";
// 等待加载完成再绘制
img.onload = function(){
ctx.drawImage(img, 0,0,50, 50);
}
console.log("path is "+img.src)
}
于是图片终于出来: