匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

以下のソースコードを実行すると、canvasを取得するクラスを実行できるのですが、そのインスタンスのfillStyleに"red"など値を入力すると、

Uncaught TypeError: Cannot set property 'fillStyle' of undefined
と表示されて値をセットできません。なぜ""で囲んだ値がundefinedになるかがわかりません。
インスタンス.プロパティ(getContext('2d')の戻り値).fillStyleだと、fillStyleがcanvas要素ではなくて、インスタンス.プロパティのプロパティを指してしまうのでしょうか?しかし、そのようものをクラスでは定義していません。

どうか、このundefinedの原因を教えて下さい。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/09/18 01:57:29
  • 終了:2013/09/25 02:00:06
匿名質問者

質問者から

匿名質問者2013/09/18 13:40:52

こちらがソースコードとなります。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Canvasの練習</title>
	<script src="../jquery-1.10.2.min.js"></script>
	<script>
	$(function() {
	var canvas = new draw("#canvas", 10, "#ffff00", "#0000ff");
	canvas.ctx.fillStyle = "red";
	canvas.ctx.fillRect(0, 0, this.ctx.width, this.ctx.height);

	function draw(selector, squareSide, firstColor, secondColor) {
	// canvas要素のオブジェクトを取得
	this.canvas = $(selector).get(0);
	//未対応ブラウザの対処
	if (!this.canvas || !this.canvas.getContext) return false;
	// 描画コンテキストを取得
	this.ctx = this.canvas.getContext('2d');
	}
	});
	</script>
</head>
<body>
<canvas id="mycanvas" width="600" height="600"></canvas>
</body>
</html>

回答(2件)

匿名回答1号 No.1

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2013/09/18 08:40:47

canvasのidがmycanvasなのにselectorが#canvasになってますよ。
コンストラクタでfalse返しても意味ないんで、例外投げた方が良いかもしれません。

匿名質問者

 ご指摘ありがとうございます。セレクタの違いに気付きませんでした。コンストラクタでfalseは返しても意味ないのですか。初めて知りました。falseで返すのは他のサイトのを真似してみました。

2013/09/18 15:41:28
匿名回答2号 No.2

匿名回答2号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2013/09/18 08:50:42

二ヶ所間違ってる。

$(function() {
var canvas = new draw("#mycanvas", 10, "#ffff00", "#0000ff");           // ★ selector 間違い
canvas.ctx.fillStyle = "red";
canvas.ctx.fillRect(0, 0, canvas.canvas.width, canvas.canvas.height);   // ★ this.canvas じゃない

function draw(selector, squareSide, firstColor, secondColor) {
    // canvas要素のオブジェクトを取得
    this.canvas = $(selector).get(0);
    //未対応ブラウザの対処
    if (!this.canvas || !this.canvas.getContext) return false;
    // 描画コンテキストを取得
    this.ctx = this.canvas.getContext('2d');
}

});

練習だから良いけど、クラスの設計や命名として良くない >class draw

匿名回答2号

なぜ""で囲んだ値がundefinedになるかがわかりません。

右辺のことを言っているわけでは無いです。

Uncaught TypeError: Cannot set property 'fillStyle' of undefined

「undefined の 'fillStyle' というプロパティをセットできません」となる。
Firefox だと、こんなエラーになってた。

TypeError: canvas.ctx is undefined

どっちが分かりやすいだろう...

2013/09/18 08:55:20
匿名質問者

ご指摘ありがとうございます。

$(function() {
	var mycanvas = new draw("#mycanvas", 10, "#ffff00", "#0000ff");
	mycanvas.ctx.fillStyle = "red";
	// mycanvas.ctx.fillRect(0, 0, mycanvas.canvas.width, mycanvas.canvas.heigth);
	mycanvas.ctx.fillRect(0, 0, 600, 600);

	console.log(mycanvas.canvas.width,mycanvas.canvas.height);// 600 600と表示される

	function draw(selector, squareSide, firstColor, secondColor) {
	// canvas要素のオブジェクトを取得
	this.canvas = $(selector).get(0);
	//未対応ブラウザの対処
	if (!this.canvas || !this.canvas.getContext) return false;
	// 描画コンテキストを取得
	this.ctx = this.canvas.getContext('2d');
	}
});

以上のようなコードに書き換えたところキャンバス一杯に赤色が塗られました。
ただ、fillRectの指定にインスタンス変数、mycanvas.canvas.width, mycanvas.canvas.heigthの2つが使えませんでした。しかし、この2つのインスタンス変数はconsole.logで表示することができます。2つとも600と表示されました。
結局、fillRectのキャンバスサイズの指定にはwidth,heigthではなく、600と直接数字を書くことで解決しました。
なぜ、インスタンス変数を引数に使えなかったのかまた疑問が出来てしまいました。

>練習だから良いけど、クラスの設計や命名として良くない
初めてjavascriptでクラス表現をしみました。クラス設計についてはまだ全然知りません。
ですが、これが良くないということ自体気づけなかったので、ご指摘していただき助かります。

>右辺のことを言っているわけでは無いです。
あ、代入後の変数ですから、左辺ですね。間違えました。""で囲んだ値ではなく、fillStyleの方です。

>どっちが分かりやすいだろう...
今回私の間違いは、セレクタとfillRectの引数でした。
chromeのエラーについて

  1. canvas要素がセレクタの間違いで取得できない。
  2. なので、getContext('2d')でCanvasRenderingContext2Dのオブジェクトが取得できない
  3. console.logでcanvas.canvasとcanvas.ctx、2つのインスタンスを中身を確認したところ、undefinedと表示されました。
  4. つまり、undefinedのctxにはfillStyleというプロパティ(インスタンス変数)がないので、セットできないと表示された。

fifefoxのエラーについて
上記のchromeのエラーについて一度整理したところでの感覚ですが、

  1. canvas.ctxが未定義と表示される
  2. this.canvas = $(selector).get(0);でget(0)の戻り値がおかしいので、$(selector)に問題がある。

という風に、私は問題に気づけるのでfifefoxのエラー表示の方がわかりやすいと思います。
自分で一度エラーについて整理する前でしたら、どちらもよくわからなかったと思います。
ただ、chromeの方ですが、
>>Uncaught TypeError: Cannot set property 'fillStyle' of undefined
はfillStyleプロパティにセットできないと訳しております。その後のof undefinedの訳し方がわかりません。
fillStyleプロパティにundefinedがセットできないのか、
undefinedのfillStyleプロパティにセットができないのか。

けど、ここまで書いていて後者のほうだと思うようになりました。
先ほどエラーについて整理したところの意味だと後者が当てはまると思うので。

私の英語力の問題でしたが、chrome、firefoxについてはどちらもcanvas.ctxの問題に最初に気づくと思うので、言っていることは同じだと思います。
だから、表現のわかりやすさとしてはどちらも同じなのでしょうが、
文法的にはfirefoxの方がわかりやすいと思います。なので、英語力が低い人にとってはfirefoxの方がわかりやすいのではないのでしょうか。

他の表現もfirefoxの方が文法的に単純に表記されているのなら、エラー表記に関してはfirefoxが優勢かなと思いました。

2013/09/18 16:25:41

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません