JavaScript/CANVASでの画像読込不可

質問

JavaScriptで、Canvas上で、透過GIFファイルを表示しようとしています。
(JSでは2週間ほど勉強しておる初心者です。皆様のアドバイス賜りたくよろしくおねがいします。)

オリジナルのPictureクラスを以下のように宣言し、
---------------------------------------------
// pictureクラス
var Picture = function(ctx, picture, locX, locY, width, height, canvas){
this.ctx = ctx;
this.picture = picture;
this.locX = locX;
this.locY = locY;
this.width = width;
this.height = height;
this.canvas = canvas;

var img = new Image();
this.img = img;
this.img.src = this.picture;
}

Picture.prototype.drawPicture = function(){
this.img.onload = function(){
★ this.ctx.drawImage(this.img, this.locX, this.locY, this.width, this.height);
}
}
----------------------------------------------------------

以下のように使用しても、

------------------------------------------
var Container1 = new Picture(mainctx, "画像ファイル.gif", 42, 80, 100, 50, maincanvas);
Container1.drawPicture();
------------------------------------------

以下のエラーがでます。(Firefox上で確認)
----------------------
TypeError: this.ctx is undefined (エラー行は★の書いている行)
----------------------

ちなみに、drawPicture関数を
----------------------
Picture.prototype.drawPicture = function(){
this.ctx.drawImage(this.img, this.locX, this.locY, this.width, this.height);
}
----------------------

と変更すれば、エラーはなくなりますが、
画像は出るときと出ないときがあります。何度か再読込すれば表示されます。

きっと thisの使い方が間違っている(＝理解していない)のではないかと
思うのですが、いかがでしょうか？

すみませんが、うまく動く方法をご教示頂ければうれしいです。よろしくおねがいします。

以上

回答No.1

Ogre7077 · ベストアンサー

関数内の this は、関数を実行する方法によって、指し示す値が異なります。

Container1.drawPicture(); と実行された場合、
関数 drawPicture 内の this は Container1 を指し示します。

img.onload がイベント発生時に呼び出されて実行される場合、
関数 onload 内の this は img を指し示します。

というわけで、関数 onload にて実行する this.ctx は、
Container1.ctx ではなく img.ctx と解釈され、
その様なプロパティが存在しないエラーが発生します。

対処方法はいろいろありますが、二つほど例示します

// this の値を変数 that に格納して onload から参照する
var that = this;
that.img.onload = function(){ that.ctx.drawImage(...) };

// this を束縛した関数を onload として使用する
var handler = function(){ this.ctx.drawImage(...) };
this.img.onload = handler.bind(this);

お礼

ありがとうございます！
頂いた例の上のものを使用してうまくいきました。
(下はbindという見慣れない単語があり、ちょっと今回は理解できそうで似なかったので・・・)

結局、drawPicture関数は以下のようにし、onloadの下は
すべてthatに置き換えることによりうまくいきました。

Picture.prototype.drawPicture = function(){
var that = this;
that.img.onload = function(){
that.ctx.drawImage(that.img, that.locX, that.locY, that.width, that.height);
}
}

どうもありがとうございました！

以上