this.ctx is undefined

質問

皆様のお知恵を拝借いたしたく。
JavaScriptのCANVASでアニメーションを表示したく、
setIntervalで1秒にして、絵を描こうとしたところです。
ところが、以下のプログラムを実施しても、
1秒ごとに、
"ReferenceError: this.ctx is not defined"
というエラーが表示されます。エラーの行は下から3行目です。

ですが、一応「テストです」という文字は表示されます。

なぜこのエラーがでるかがわからず・・・・
アドバイスいただけないでしょうか。よろしくおねがいします。

----------------------------

onload = function() {
var layer1 = document.getElementById('layer1');
if ( ! layer1 || ! layer1.getContext ) { return false; }
var lay1ctx = layer1.getContext('2d');

setInterval(drawAnime, 1000);
drawAnime(layer1, lay1ctx);
};

function drawAnime(layer1, lay1ctx){
var SSESocArc = new SocArc(lay1ctx);
SSESocArc.drawArc(50);
}

var SocArc = function (ctx){
this.ctx = ctx;
}

SocArc.prototype.drawArc = function(){
this.ctx.font = "20px 'Ariel bold'"; ← エラーはココ
this.ctx.fillText("テストです", 100, 100);
}

回答No.2

神崎 渉瑠（@taloo） · ベストアンサー

直接エラーが出ているのはthis.ctx.fontですが、そのメソッドを呼び出している部分が異なります。

setInterval(drawAnime, 1000); /* 1秒ごとにエラーが出る部分 */
drawAnime(layer1, lay1ctx); /* テストです という文字を表示する部分（プログラム開始時に1回だけ実行） */

--------------
>setInterval(drawAnime, 1000);

この書き方でのsetIntervalから呼び出されるdrawAnime()には引数が渡りません。
そのため、
drawAnime関数のコード

>function drawAnime(layer1, lay1ctx){
>var SSESocArc = new SocArc(lay1ctx);
>SSESocArc.drawArc(50);
>}

この時のlay1ctxはundefinedですので、

>var SocArc = function (ctx){
>this.ctx = ctx;
>}

このコンストラクタで生成されるthis.ctxはundefinedとなります。

------------------------------
修正案
なお、同じ内容で描画するだけですので、1回しか描かれていないような見え方になります。

var SSESocArc; /* グローバル変数に変更 */
onload = function() {
var layer1 = document.getElementById('layer1');
if ( ! layer1 || ! layer1.getContext ) { return false; }
var lay1ctx = layer1.getContext('2d');

SSESocArc = new SocArc(lay1ctx); /* オブジェクトを生成して描画の準備 */
drawAnime(); /* 最初の描画 */

setInterval(drawAnime, 1000); /* 1秒ごとに描画を繰り返す */
};

/* インターバルで呼び出す関数ではオブジェクトの生成は行わずに、描画だけを行う */
function drawAnime(layer1, lay1ctx){
SSESocArc.drawArc(50);
}

var SocArc = function (ctx){
this.ctx = ctx;
}

SocArc.prototype.drawArc = function(){
this.ctx.font = "20px 'Ariel bold'"; ← エラーはココ
this.ctx.fillText("テストです", 100, 100);
}

お礼

アドバイスありがとうございます。
確かにsetIntervalは引数を渡せない・・という話をWebで見たことが有りまりた！

検索したところ、以下のサイトが見つかりました。
http://www.gravity-works.jp/gravica/web/js/003755.html

これを参考に、

setInterval(function(){ drawAnime(canvas, mainctx, layer1, lay1ctx, layer2, lay2ctx); }, 40);

という無名関数の形にしたら、うまくいくようになりました。

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

以上

回答No.1

Kaneyan-R

シングルクォートの位置がおかしいと思うのだけど・・・

this.ctx.font = "bold 20px 'Ariel''";

で、どう？

お礼

アドバイスありがとうございます。

特にこのシングルクォーテーションの位置は
これでも問題ないようです。