Javascript canvas, unerwarteter Fehler?
Hi! Derzeit entwickle ich wieder ein game mit dem js canvas. Allerdings hab ich jetzt einen drawImage bug, den davor noch nie so hatte. Als ich dann zum Test ein Bild im main loop gezeichnet habe wurd das Bild immernoch nicht richtig gezeichnet. Der Code:
Und obwohl die dx and dy Parameter 100 sind wird das Bild nur so klein auf den Canvas produziert:
Die Bildgrösse selbst ist richtig. Es ist ein 15*15 px großes von mir gepixeltes Bild.
Das komische ist aber, sobald ich dx und dy auf zb 500 stelle verschwindet das Bild komplett und es wird gar nichts mehr gezeichnet.
Mfg Weißbrot
2 Antworten
Hallo! Es sieht so aus, als ob du das Bild zeichnest, bevor es vollständig geladen ist. Stelle sicher, dass du auf das "load" Ereignis des Bildobjekts wartest, bevor du es zeichnest. Versuche den folgenden Code:
function update_main() {
c.clearRect(0, 0, canvas.width, canvas.height);
let img = new Image();
img.src = "./media_files/images/ui_objects/start_button.png";
img.onload = function() {
c.drawImage(img, 100, 100);
};
game.update();
game.draw();
requestAnimationFrame(update_main);
}
update_main();
Indem du das Bild erst zeichnest, wenn es vollständig geladen ist, solltest du dieses Problem beheben können.
Vielleicht so? function update_main() {
c.clearRect(0, 0, canvas.width, canvas.height);
let img = new Image();
img.src = "./media_files/images/ui_objects/start_button.png";
img.onload = function() {
c.drawImage(img, 100, 100, 15, 15); // Setze hier die gewünschte Breite und Höhe
};
game.update();
game.draw();
requestAnimationFrame(update_main);
}
update_main();
wie komm ich auf was? Achso und ja deine 2. Antwortmöglichkeit hat geholfen. Ich habe die dWidth und dHeight Parameter vergessen
Und obwohl die dx and dy Parameter 100 sind wird das Bild nur so klein auf den Canvas produziert (...)
Die beiden Parameter dienen der Positionsangabe. Nicht zur Skalierung.
Das komische ist aber, sobald ich dx und dy auf zb 500 stelle verschwindet das Bild komplett (...)
Dann liegen die Koordinaten sicherlich bereits außerhalb der Zeichenfläche.
Hi! Meine Güte bin ich grad dumm xD habe ganz vergessen die d width und d height parameter reinzuschreiben.
Hab das so lange nicht mehr gemacht, ist mir jetzt halt so passiert haha ich war echt schon am verzweiflen
Nein, das würde nicht das Problem beheben, warum das Bild so klein gezeichnet wird... Und warum es bei 500 500 auf einmal verschwindet. Außerdem sieht die Antwort Ki generiert aus