-PR-
  • 困ってます
  • 質問No.8650576
解決
済み

JavaScript/CANVASでの画像読込不可

  • 閲覧数60
  • ありがとう数6
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 58% (7/12)

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の使い方が間違っている(=理解していない)のではないかと
思うのですが、いかがでしょうか?

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

以上
  • 回答数1
  • 気になる数0

質問者が選んだベストアンサー

  • 回答No.1
レベル11

ベストアンサー率 65% (170/258)

関数内の 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);
お礼コメント
nsonoda

お礼率 58% (7/12)

ありがとうございます!
頂いた例の上のものを使用してうまくいきました。
(下は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);
}
}

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

以上
投稿日時 - 2014-06-24 07:53:16
  • ありがとう数0
-PR-
-PR-
  • 回答数1
  • 気になる数0
このQ&Aのテーマ
このQ&Aで解決しましたか?

関連するQ&A

-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ