人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

●質問者: 匿名質問者
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

質問者から

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

<!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 ● 匿名回答1号

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


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

2 ● 匿名回答2号

二ヶ所間違ってる。

$(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 << どっちが分かりやすいだろう...

匿名質問者さんのコメント
ご指摘ありがとうございます。 >|jquery| $(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のエラーについて +canvas要素がセレクタの間違いで取得できない。 +なので、getContext('2d')でCanvasRenderingContext2Dのオブジェクトが取得できない +console.logでcanvas.canvasとcanvas.ctx、2つのインスタンスを中身を確認したところ、undefinedと表示されました。 +つまり、undefinedのctxにはfillStyleというプロパティ(インスタンス変数)がないので、セットできないと表示された。 fifefoxのエラーについて 上記のchromeのエラーについて一度整理したところでの感覚ですが、 +canvas.ctxが未定義と表示される +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が優勢かなと思いました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ