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ベストアンサー
- 回答日時:
関数内の 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);
}
}
どうもありがとうございました!
以上
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- 中学校 中学 英語 3 2023/04/02 09:50
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- 英語 英語の問題でどう解いたらよいか分からないものがあります。教えていただけませんか?接続詞の単元です。 2 2023/06/18 15:45
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptでの画像切り替えを...
-
横にスクロールするだけのスラ...
-
交互に入れ替わる画像を複数配置
-
デフォルト非表示にしたい。【t...
-
JavaScript スクロール制御
-
マウスカーソルに合わせて画像...
-
VBAでIEを動かす場合、下記の①...
-
javascriptテキストBOX色を元に...
-
javascriptで毎月替わる画像
-
eclipseでcssを使うためには?
-
MAX関数を使ってからLEFT JOIN...
-
MFCで画像を表示させているので...
-
JavaScript 可変スクロールバ...
-
Slick.jsのオプションrtlについて
-
onmouseover、onmouseoutの仲間...
-
1行で左寄せと右寄せと中央揃え...
-
IFRAMEの表示/非表示を切り替え...
-
jspでcssが読み込めない
-
this.src等のthisについて
-
タブで開いてさらにタブ内をア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
Javascript初心者|jQueryの.va...
-
デフォルト非表示にしたい。【t...
-
jQueryでのドラッグアンドドロ...
-
複数bxsliderをタブで切り替え...
-
画像の表示位置
-
JavaScriptでの画像切り替えを...
-
Colorboxがうまく設置できません
-
clear機能を失わずにファイルア...
-
embed要素のsrc属性の値を変更...
-
JQueryでオープニングアニメー...
-
全部のサイコロをjavascriptで...
-
一定時間で入れ替わるバナー画...
-
JQueryで画像の上で文字を動かす
-
スクリプト
-
画像拡大とともにエレメントも...
-
JavaScript スクロール制御
-
アップロードファイルの種類に...
-
サムネイルにカーソルを合わせ...
-
htmlの中のhtmlをタブで切り替え
おすすめ情報