HTML5-canvas - Methode drawImage nicht immer zeichnen das Bild
Bin ich die Zeichnung auf die Leinwand jedes mal, wenn ein Benutzer eine Taste drückt, aber manchmal ist das Bild nicht immer gezeichnet auf die Leinwand. Ich denke, es könnte sein, dass das Bild nicht geladen in der Zeit, bevor der Kontext.drawimage-Funktion verläuft, wie einige der kleineren Dateien manchmal gezogen. Ich habe mit der Konsole und aktiviert die Ressourcen und das ist das einzige problem, das ich mir denken kann.
Wie vermeide ich dieses problem?
Dies ist mein Javascript-code.
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var questionbg = new Image();
var answerbg = new Image();
//this code is inside a function that is called each time a user presses a button
if(questiontype == "text"){
questionbg.src = "./resources/textquestionbg.png";
context.drawImage(questionbg, 0, 0);
}
//if image question
else if(questiontype == "image"){
questionbg.src = "./resources/imageaudiovideoquestionbg.png";
context.drawImage(questionbg, 0, 0);
}
//if audio question
else if(questiontype == "audio"){
questionbg.src = "./resources/imageaudiovideoquestionbg.png";
context.drawImage(questionbg, 0, 0);
}
//else it is a video question
else{
questionbg.src = "./resources/imageaudiovideoquestionbg.png";
context.drawImage(questionbg, 0, 0);
}
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sollten Sie überprüfen, ob das Bild geladen ist. Wenn nicht, dann hören Sie auf das load-Ereignis.
MDN (Mozilla Doc, gute Quelle, btw) schlägt vor:
Offensichtlich, Sie nicht zu wollen, wenden Sie den Pinselstrich oder die Füllung. Aber die Idee ist die gleiche.