HTML5 canvas - drawImage pas toujours le dessin de l'image

Je suis de dessin sur la toile à chaque fois qu'un utilisateur appuie sur un bouton, mais parfois, l'image n'est pas dessiné sur la toile. Je pense que cela pourrait être que l'image n'est pas chargée dans le temps avant le contexte.drawimage fonction s'exécute, comme certains des fichiers plus petits, parfois dessinés. J'ai utilisé la console et vérifié les ressources et donc c'est le seul problème que je peux penser.

Comment puis-je éviter ce problème?

C'est mon code Javascript.

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);
}

OriginalL'auteur user2177629 | 2013-03-19

  1. 14

    Vous devez vérifier si l'image est chargée. Si pas d'écouter l'événement load.

    questionbg.src = "./resources/imageaudiovideoquestionbg.png";
if (questionbg.complete) {
    context.drawImage(questionbg, 0, 0);
} else {
    questionbg.onload = function () {
        context.drawImage(questionbg, 0, 0);    
    };
}

    MDN (Mozilla Doc, grande source d'ailleurs) suggère:

    function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function(){
    ctx.drawImage(img,0,0);
    ctx.beginPath();
    ctx.moveTo(30,96);
    ctx.lineTo(70,66);
    ctx.lineTo(103,76);
    ctx.lineTo(170,15);
    ctx.stroke();
  };
  img.src = '/files/4531/backdrop.png';
}

    Évidemment, vous n'êtes pas désireux d'appliquer le contour ou de fond. Cependant, l'idée est la même.

    fantastique, merci beaucoup Joe!
    bonne prise......
    Il est préférable de configurer des img.src après avoir défini img.gestionnaire onload.
    que faire si vous n'êtes pas à l'écriture à partir d'une image, mais à partir d'une vidéo html5 de contrôle. Lorsque le cadre des changements sur timeupdate il n'y a aucun moyen de vérifier si l'image est chargée.

    OriginalL'auteur Joe