Question

基本上我有两个图像需要同时显示（以及更晚一些）。 var Canvas = function（canvasEl，width，height）{ this.el = canvasEl; this.el.width = width; this.el.height =身高; this.ctx = canvasEl.getContext（“2d”）; } var canvas = new Canvas（document.querySelector（“＃mycanvas”），1100,650）;

var add = new Image();

add.onload = function() {
    canvas.ctx.drawImage(this, 500,-215);
};
add.src="add.png";
var currentdate = new Date();
var datetime = currentdate.getHours();


if(datetime==1||datetime==13){
var clock1 = new Image();

add.onload = function() {
    canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock1.png";
}

else if(datetime==2||datetime==14){
var clock2 = new Image();

add.onload = function() {
    canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock2.png";
}

else if(datetime==3||datetime==15){
var clock3 = new Image();

add.onload = function() {
    canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock3.png";
}

else if(datetime==4||datetime==16){
var clock4 = new Image();

add.onload = function() {
    canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock4.png";
}

else if(datetime==5||datetime==17){
var clock5 = new Image();

add.onload = function() {
    canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock5.png";
}

else if(datetime==6||datetime==18){
var clock6 = new Image();

add.onload = function() {
    canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock6.png";
}

else if(datetime==7||datetime==19){
var clock7 = new Image();

add.onload = function() {
    canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock7.png";
}

else if(datetime==8||datetime==20){
var clock8 = new Image();

add.onload = function() {
    canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock8.png";
}

else if(datetime==9||datetime==21){
var clock9 = new Image();

add.onload = function() {
    canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock9.png";
}

else if(datetime==10||datetime==22){
var clock10 = new Image();

add.onload = function() {
    canvas.ctx.drawImage(this, 600,100);
};
add.src="clock/clock10.png";
}
else if(datetime==11||datetime==23){
var clock11 = new Image();

add.onload = function() {
    canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock11.png";
}

else if(datetime==12||datetime==0){
var clock12 = new Image();

add.onload = function() {
    canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock12.png";
}

</script>
</body>

我现在有这个，它应该做的就是有一个名为“add.png”的图像和另一个名为“clock.png”的图像同时显示在画布上的不同位置。代码有效，但只显示时钟。

Answer 1

每个图片都需要一个单独的.onload - 而不仅仅是1个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[]

}

如何在HTML 5画布中叠加图像

1 个答案: