Uncaught TypeError: Cannot set property 'fillStyle' of undefined
と表示されて値をセットできません。なぜ""で囲んだ値がundefinedになるかがわかりません。
インスタンス.プロパティ(getContext('2d')の戻り値).fillStyleだと、fillStyleがcanvas要素ではなくて、インスタンス.プロパティのプロパティを指してしまうのでしょうか?しかし、そのようものをクラスでは定義していません。
どうか、このundefinedの原因を教えて下さい。
こちらがソースコードとなります。
<!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>
canvasのidがmycanvasなのにselectorが#canvasになってますよ。
コンストラクタでfalse返しても意味ないんで、例外投げた方が良いかもしれません。
二ヶ所間違ってる。
$(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
なぜ""で囲んだ値がundefinedになるかがわかりません。
右辺のことを言っているわけでは無いです。
Uncaught TypeError: Cannot set property 'fillStyle' of undefined
「undefined の 'fillStyle' というプロパティをセットできません」となる。
Firefox だと、こんなエラーになってた。
TypeError: canvas.ctx is undefined
どっちが分かりやすいだろう...
ご指摘ありがとうございます。
$(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のエラーについて
fifefoxのエラーについて
上記のchromeのエラーについて一度整理したところでの感覚ですが、
という風に、私は問題に気づけるので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が優勢かなと思いました。
ご指摘ありがとうございます。セレクタの違いに気付きませんでした。コンストラクタでfalseは返しても意味ないのですか。初めて知りました。falseで返すのは他のサイトのを真似してみました。
2013/09/18 15:41:28