Javascript 如何在HTML5画布中覆盖图像

基本上，我有两个图像，我需要在同一时间显示（和更多以后）。 var Canvas=函数（画布、宽度、高度）{ this.el=画布； 此.el.width=宽度； 该高度=高度； this.ctx=canvasEl.getContext（“2d”）； } var canvas=newcanvas（document.querySelector（“mycanvas”），1100650

var add=new Image（）；
add.onload=函数（）{
canvas.ctx.drawImage（这个，500，-215）；
};
add.src=“add.png”；
var currentdate=新日期（）；
var datetime=currentdate.getHours（）；
如果（datetime==1 | | datetime==13）{
var clock1=新图像（）；
add.onload=函数（）{
canvas.ctx.drawImage（this，0,0）；
};
add.src=“clock/clock1.png”；
}
else if（datetime==2 | | datetime==14）{
var clock2=新图像（）；
add.onload=函数（）{
canvas.ctx.drawImage（this，0,0）；
};
add.src=“clock/clock2.png”；
}
else if（datetime==3 | | datetime==15）{
var clock3=新图像（）；
add.onload=函数（）{
canvas.ctx.drawImage（this，0,0）；
};
add.src=“clock/clock3.png”；
}
else if（datetime==4 | | datetime==16）{
var clock4=新图像（）；
add.onload=函数（）{
canvas.ctx.drawImage（this，0,0）；
};
add.src=“clock/clock4.png”；
}
else if（datetime==5 | | datetime==17）{
var clock5=新图像（）；
add.onload=函数（）{
canvas.ctx.drawImage（this，0,0）；
};
add.src=“clock/clock5.png”；
}
else if（datetime==6 | | datetime==18）{
var clock6=新图像（）；
add.onload=函数（）{
canvas.ctx.drawImage（this，0,0）；
};
add.src=“clock/clock6.png”；
}
else if（datetime==7 | | datetime==19）{
var clock7=新图像（）；
add.onload=函数（）{
canvas.ctx.drawImage（this，0,0）；
};
add.src=“clock/clock7.png”；
}
else if（datetime==8 | | datetime==20）{
var clock8=新图像（）；
add.onload=函数（）{
canvas.ctx.drawImage（this，0,0）；
};
add.src=“clock/clock8.png”；
}
else if（datetime==9 | | datetime==21）{
var clock9=新图像（）；
add.onload=函数（）{
canvas.ctx.drawImage（this，0,0）；
};
add.src=“clock/clock9.png”；
}
else if（datetime==10 | | datetime==22）{
var clock10=新图像（）；
add.onload=函数（）{
canvas.ctx.drawImage（本，600100）；
};
add.src=“clock/clock10.png”；
}
else if（datetime==11 | | datetime==23）{
var clock11=新图像（）；
add.onload=函数（）{
canvas.ctx.drawImage（this，0,0）；
};
add.src=“clock/clock11.png”；
}
else if（datetime==12 | | datetime==0）{
var clock12=新图像（）；
add.onload=函数（）{
canvas.ctx.drawImage（this，0,0）；
};
add.src=“clock/clock12.png”；
}

---

我现在有了它，它要做的就是让一个名为“add.png”的图像和另一个（基于时间）名为“clock.png”的图像同时显示在画布上的不同位置。代码可以工作，但它只显示时钟。

您需要为每个图像单独加载一个.onload，而不仅仅是一个add.onload

// not always add.onload ...

add.onload ... add.src="add.png";
clock1.onload ... clock1.src="clock/clock1.png";
clock2.onload ... clock2.src="clock/clock2.png";

// same for clock3-12

请记住，图像是异步加载的，因此不能保证图像的加载顺序与代码相同。这可能是问题，也可能不是问题，这取决于图像如何组合在一起

下面是一个图像加载器的示例，它保证加载所有图像，并且图像都按指定顺序加载：

// image loader

var imageURLs=[];
var imagesOK=0;
var imgs=[];
imageURLs.push("add.png");
imageURLs.push("clock/clock1.png");
imageURLs.push("clock/clock2.png");
imageURLs.push("clock/clock3.png");
imageURLs.push("clock/clock4.png");
imageURLs.push("clock/clock5.png");
imageURLs.push("clock/clock6.png");
imageURLs.push("clock/clock7.png");
imageURLs.push("clock/clock8.png");
imageURLs.push("clock/clock9.png");
imageURLs.push("clock/clock10.png");
imageURLs.push("clock/clock11.png");
imageURLs.push("clock/clock12.png");

loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

function start(){

    // the imgs[] array holds your fully loaded images
    // the imgs[] are in the same order as imageURLs[]

}

//图像加载程序
var-imageurl=[]；
var-imagesOK=0；
var-imgs=[]；
push（“add.png”）；
push（“clock/clock1.png”）；
push（“clock/clock2.png”）；
push（“clock/clock3.png”）；
push（“clock/clock4.png”）；
push（“clock/clock5.png”）；
push（“clock/clock6.png”）；
push（“clock/clock7.png”）；
push（“clock/clock8.png”）；
push（“clock/clock9.png”）；
push（“clock/clock10.png”）；
push（“clock/clock11.png”）；
push（“clock/clock12.png”）；
加载图像（开始）；
函数LoadAllImage（回调）{
for（var i=0；i=imageURL.length）{
回调（）；
}
};
img.onerror=function（）{alert（“映像加载失败”）；}
img.crossOrigin=“匿名”；
img.src=imageURL[i]；
}      
}
函数start（）{
//imgs[]数组保存您已完全加载的图像
//imgs[]与ImageURL[]的顺序相同
}

// image loader

var imageURLs=[];
var imagesOK=0;
var imgs=[];
imageURLs.push("add.png");
imageURLs.push("clock/clock1.png");
imageURLs.push("clock/clock2.png");
imageURLs.push("clock/clock3.png");
imageURLs.push("clock/clock4.png");
imageURLs.push("clock/clock5.png");
imageURLs.push("clock/clock6.png");
imageURLs.push("clock/clock7.png");
imageURLs.push("clock/clock8.png");
imageURLs.push("clock/clock9.png");
imageURLs.push("clock/clock10.png");
imageURLs.push("clock/clock11.png");
imageURLs.push("clock/clock12.png");

loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

function start(){

    // the imgs[] array holds your fully loaded images
    // the imgs[] are in the same order as imageURLs[]

}