3

JavaScriptでCanvasに画像を描画しようとしているのですが、もちろん画像が読み込まれるまで待ちたいです。ただし、私の onload 関数は呼び出されないようです。

これが私が試したことです：

function GameObject(x, y)
{
    this.x = x;
    this.y = y;
    this.image = {};
    this.loaded = false;

    this.load = function(filename)
    {
        this.image = new Image();
        this.image.onload = function()
        {
            alert("image loaded");
            this.loaded = true;
        };
        this.image.src = filename;
    };
};

次のようにロード関数を呼び出しています。

$( document ).ready(function()
{
    main();
});

var player = new Player(0, 0);

function main()
{
    player.load("images/player.png");
};

Player は GameObject から継承します。

FireBug を使用すると、画像が読み込まれたように見えますが、「画像が読み込まれました」というアラートは表示されず、this.loaded は false のままです。

何が間違っている可能性がありますか？

EDIT : イメージがロードされました (パス名にエラーがありました) が、アラートが呼び出されている間、 this.loaded が true に設定されることはありません。

4

2 に答える 2

2

loadedオブジェクト内のフィールドを探す必要がありplayer.imageます。

オブジェクトにloaded割り当てるにplayerは、コードの一部を次のように書き換える必要があります。

this.load = function(filename)
{
    var self = this;
    this.image = new Image();
    this.image.onload = function()
    {
        alert("image loaded");
        self.loaded = true;
    };
    this.image.src = filename;
};

問題は、コンテキスト(どのポイントまで)onloadが呼び出されるかがオブジェクトであるということです。そのため、最初のコンテキストを に保存する必要があります。thisimageself

于 2013-06-14T13:23:17.307 に答える