Question

有三张图片,我们要使用canvas drawImage() 方法把这三张图片画下来,如何判断三张图片 onload 完毕怎么写?

Answer 1

img的onload事件。

var img=new Image();
img.src="a.png";
img.onload=onloaded;
function onloaded(e){
console.log("图片加载完了");
}

<canvas width="1000" height="600" id="myCanvas" stylle="width:1000px;height:600px;"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
var imagUrls=["

,"

,"
];
var n=0;

loadImg();

function loadImg(){
	if(n<imagUrls.length){
		var img=new Image();
		img.src=imagUrls[n];
		img.onload=onloaded;
	}
	else{
		console.log("图片加载完了");
	}
}
function onloaded(e){
	var img=e.target;
	ctx.drawImage(img,0,0);
	n++;
	loadImg();
}


</script>