8

ユーザーがボタンを押すたびにキャンバスに描画していますが、キャンバスに画像が描画されないことがあります。これは、 context.drawimage 関数が実行される前に画像がロードされていない可能性があると思います。小さなファイルの一部が描画されることがあるためです。コンソールを使用してリソースを確認したので、考えられる唯一の問題です。

この問題を回避するにはどうすればよいですか?

これは私の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);
}
4

1 に答える 1

16

画像がロードされているかどうかを確認する必要があります。そうでない場合は、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、優れた情報源) は次のことを提案しています。

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

明らかに、ストロークや塗りつぶしを適用する必要はありません。ただし、考え方は同じです。

于 2013-03-19T16:02:29.560 に答える