web-dev-qa-db-ja.com

getContextは関数ではありません

私は、ウィンドウのサイズが変更されるとキャンバスのサイズを動的に変更するキャンバスを使用して、基本的なWebアプリケーションの作成に取り組んでいます。欠陥なしで静的に動作するようになりましたが、オブジェクトを作成して動的に作成するとエラーがスローされます

in chromeエラーは：

不明なTypeError：オブジェクト[オブジェクトオブジェクト]にはメソッド 'getContext'がありません

そして、Firefoxでは次のとおりです。

this.element.getContextは関数ではありません

私はウェブを検索しましたが、それは一般的な問題のようですが、言及された修正はどれも違いをもたらしません。

問題のコードは次のとおりです。

layer['background'] = new canvasLayer("body","background");
function canvasLayer(location,id){
    $(location).append("<canvas id='"+id+"'>unsupported browser</canvas>");
    this.element=$(id);
    this.context = this.element.getContext("2d"); //this is the line that throws the error
    this.width=$(window).width(); //change the canvas size
    this.height=$(window).height();
    $(id).width($(window).width()); //change the canvas tag size to maintain proper scale
    $(id).height($(window).height());
}

前もって感謝します。

javascriptjqueryhtml5canvas
41
devnill

あなたの価値：

_this.element = $(id);
_

は純粋なCanvas要素ではなく、jQueryオブジェクトです。

元に戻すには、getContext()を呼び出すか、this.element.get(0)を呼び出すか、jQueryオブジェクトではなく実要素を格納します。

_function canvasLayer(location, id) {

    this.width = $(window).width();
    this.height = $(window).height();
    this.element = document.createElement('canvas');

    $(this.element)
       .attr('id', id)
       .text('unsupported browser')
       .width(this.width)
       .height(this.height)
       .appendTo(location);

    this.context = this.element.getContext("2d");
}
_

http://jsfiddle.net/alnitak/zbaMh/ で実行中のコードを参照してください。理想的にはChrome Javascriptコンソールを使用して、デバッグ出力で結果オブジェクトを確認できます。

64
Alnitak

または、次を使用できます。

this.element=$(id)[0];
30
UpTheCreek

getContextを呼び出そうとする要素として、誤って<div>の代わりに<canvas>を使用していたため、同じエラーが発生しました。

24
jbasko