0

事実: 次のコードは有効です。

var img = new Image();
img.onload = function() {
    context.drawImage(img, 32, 32);
};
img.src = "example.png";

最初の観察: 以下はキャンバスに描画されません。

var img = new Image();
img.src = "example.png";
context.drawImage(img, 32, 32);

2番目の観察：以下は（最終的に）キャンバスに描画されます...

var img = new Image();
img.src = "example.png";
setInterval(function() {context.drawImage(img, 32, 32);}, 1000);

コールバックで drawImage 関数を呼び出す必要があるのはなぜですか? その場合、 setInterval 関数にネストされたときに最終的に機能するのはなぜですか?

4

4 に答える 4

5

src画像オブジェクトのを設定すると、ブラウザがダウンロードを開始します。ただし、ブラウザーが次のコード行を実行するまでに、その画像が読み込まれる場合と読み込まれない場合があります。まだロードされていないため、「空白の」画像を描画しているのはそのためです。

onload画像の読み込みがいつ終了したかを知るために、ハンドラーを配置する必要があります。そうして初めて、キャンバスに描画します。

var img = new Image();             //create image object
img.onload = function(){           //create our handler
  context.drawImage(img, 32, 32);  //when image finishes loading, draw it
}
img.src = "example.png";           //load 'em up!
于 2013-04-15T01:09:58.980 に答える
1

画像がロードされた後にのみキャンバスに描画できます。そのため、onload コールバックから実行すると機能します。また、一定の時間が経過すると、最終的に完全にロードされるため、setInterval で動作します。

于 2013-04-15T01:10:43.793 に答える
0

画像の読み込みは瞬時ではなく、時間がかかるためだと思います。画像が読み込まれると、キャンバスに描画できます

于 2013-04-15T01:10:07.077 に答える
0

これが必要なのは、ブラウザーがイメージの読み込みを正しく処理するためにイメージを「読み取り」、最終的にダウンロードする必要があるためです (onload イベント)。setInterval を使用してこの動作をシミュレートすることはできませんでした。たとえば、低速の接続で大きな画像をロードするとうまくいきませんでした...したがって、これを行う最善の方法は次のとおりです。

var img = new Image():
img.src = "image.jpeg";
img.onload = function() {
    // Now you can play with your image.
}
于 2013-04-15T01:12:55.353 に答える