匿名質問者回答ポイントなし

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

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

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

ログインして回答する

みんなの回答

匿名質問者
2013/09/18 02:01:11

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

<!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>

匿名回答1号2013/09/18 08:40:47

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

1件のコメントを見る
匿名質問者 2013/09/18 15:41:28

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

匿名回答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件のコメントを見る
匿名回答2号 2013/09/18 08:55:20

なぜ""で囲んだ値がundefinedになるかがわかりません。
右辺のことを言っているわけでは無いです。
Uncaught TypeError: Cannot set property 'fillStyle' of undefined
「undefined の 'fillStyle' というプロパティをセットできません」となる。
Firefox だと、こんなエラーになってた。
TypeError: canvas.ctx is undefined
どっちが分かりやすいだろう...
匿名質問者 2013/09/18 16:25:41
ご指摘ありがとうございます。
```
$(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つが使えませんでした。しかし、この２つのインスタンス変数は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が優勢かなと思いました。

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

みんなの回答

匿名質問者
2013/09/18 02:01:11

匿名回答1号2013/09/18 08:40:47

匿名質問者 2013/09/18 15:41:28

匿名回答2号2013/09/18 08:50:42

匿名回答2号 2013/09/18 08:55:20

匿名質問者 2013/09/18 16:25:41

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

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

みんなの回答

匿名質問者 2013/09/18 02:01:11

匿名回答1号2013/09/18 08:40:47

匿名質問者 2013/09/18 15:41:28

匿名回答2号2013/09/18 08:50:42

匿名回答2号 2013/09/18 08:55:20

匿名質問者 2013/09/18 16:25:41

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

匿名質問者
2013/09/18 02:01:11