1

Windows 8 JavaScript アプリを開発しています。

キャンバスに画像を読み込もうとしましたが、アプリを直接使用しCTRL + F5てアプリを実行すると、キャンバスに画像がありません。

ブレークポイントを配置せずにアプリをデバッグすると、アプリが直接開きますが、まだ画像がありません。

アプリをデバッグして配置し、breakpoint画像生成のコードが終了したらコードを段階的に実行すると、デバッグ記号をクリックしてデバッグを続行すると、画像がキャンバスに表示されます。ここで何が起こっているのか、ブレークポイントを使用してデバッグ時に画像のみを表示する理由がわかりません。デバッグせずに通常どおり実行すると、画像が表示されないのはなぜですか?

画像生成用のコードは次のとおりです。

Init: function (canvas,ctx) {

    this.ghostCanvas = canvas;
    this.ghostCanvasCtx = ctx;

    var banner = new Image();
    banner.src = "images/banner.jpg";

    ctx.drawImage(banner, 100, 100);
}

このコードは、ブレークポイントを配置して 1 行ずつ実行すると機能します。また、2 つのキャンバスを重ねて使用しています。しかし、このキャンバスの z-index の方が大きいので、問題はないはずです。この問題の原因は何ですか?

4

1 に答える 1

1

キャンバスに描画する前に、画像が読み込まれるのを待つ必要があります。'load' イベントのイメージ オブジェクトにイベント ハンドラーを追加し、それが呼び出されたときにキャンバスにイメージを描画します。

于 2012-12-09T19:35:36.330 に答える