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

Question

如题所述

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>