Laden mehrerer Bilder in Canvas

Question

Ich habe ein Problem mit der Anzeige von Bildern im Canvas. Ich verstehe nicht, warum nur ein Bild gerendert wird (Hintergrund in diesem Fall). Hier ist mein Code:

// ... Some code here 

    this.createBackground(canvas, config); 
    this.createPlayer(canvas, config); 

    } 

    createBackground(element, config) { 
    const canvas = element; 
    const ctx = canvas.getContext("2d"); 

    const bg = new Image(); 
    bg.src = "./img/" + config.bg; 

    bg.onload =() => { 
     ctx.drawImage(bg, 0, 0, config.width, config.height); 
    } 

    return bg; 
    } 

    createPlayer (element, config) { 
    const canvas = element; 
    const ctx = canvas.getContext("2d"); 

    const player = new Image(); 
    player.src = "./img/" + config.character + "/Run1.png"; 

    player.onload =() => { 
     ctx.drawImage(player, 70, 310, player.width/3, player.height/3); 
    } 

    return player; 
    } 

Warum mein Player nicht in Leinwand nach bg-Methode angezeigt wird?

Answer 1

Zuerst müssen Sie sicher contex global machen, versuchen, es zu auf:

ctx.globalCompositeOperation='destination-over'; 

und auch über die Leinwand Breite und Höhe stellen Sie sicher, sie sollten größer sein als Ihre Spieler versetzt, wie:

Answer 2

Wenn Sie über Medien verfügen, die von anderen Medien abhängig sind, laden Sie alle Medien zu Beginn und warten Sie, bis alle geladen sind, bevor Sie sie verwenden.

Zum Beispiel lädt das folgende ein Array von Bildern, mit einem Array von URLs zum Erstellen und Starten der Last. Ein Zähler zählt jedes geladene Bild und wenn der Ladezähler gleich der Anzahl der Bilder ist, wird die Funktion allLoaded aufgerufen.

const imageURL = ["foreground.jpg","background.jpg"]; // list of image URLs 
const images = []; /// array to hold images. 
var imageCount = 0; // number of loaded images; 

// function called once all images have loaded. 
function allLoaded(){ 
    // all images have loaded and can be rendered 
    ctx.drawImage(images[1],0,0); // draw background 
    ctx.drawImage(images[0],0,0); // draw foreground 
} 

// iterate each image URL, create, load, and add it to the images array 
imageURL.forEach(src => { // for each image url 
    const image = new Image(); 
    image.src = src; 
    image.onload =()=>{ 
     imageCount += 1; 
     if(imageCount === imageURL.length){ // have all loaded???? 
      allLoaded(); // call function to start rendering 
     } 
    } 
    images.push(image); // add loading image to images array 

}); 
// the image onload event will not be called until all current execution is 
// complete.