20

キャンバスを使用する簡単な例を作成しましたが、jQueryセレクターを使用するとコードが機能しないことがわかりました。

例：

Javascript

    window.onload = function() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.fillRect(10,50,100,200);
    };

JQuery

   window.onload = function() {
        var canvas = $('#myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.fillRect(10,50,100,200);
    };

だから私はそれがなぜ起こったのか分かりません。制限はありますか？

4

4 に答える 4

37

jQueryフィドルのこの更新されたバージョンを確認してください：http：//jsfiddle.net/techfoobar/46VKa/3/

問題は次のとおりです。

var canvas = $('#myCanvas')getContextなどのメンバー関数を持つネイティブDOM要素オブジェクトではなく、jQuery拡張オブジェクトを取得します。このためには、を使用してcanvas要素を取得する必要があります。var canvas = $('#myCanvas')[0]

注： var canvas = document.getElementById('myCanvas');と同等ですvar canvas = $('#myCanvas')[0]

于 2012-07-20T06:39:34.997 に答える
12 
window.onload = function() {
     var canvas = $('#myCanvas');
     var ctx = canvas[0].getContext('2d'); // not canvas.getContext('2d')
            
     ctx.fillRect(10,50,100,200);
};

使用しているコードでは、ですcanvas.getContext('2d');が、である必要がありますcanvas[0].getContext('2d');。

DOM要素getContext('2d')で動作するため、ここで、ただしノードはDOM要素を返します。var canvas = $('#myCanvas');jQuery object

また、jQueryオブジェクトからDOM要素 （ここではcanvas要素）を取得するには、を使用する必要がありますcanvas[0]。

使用しているJavaScriptコード：

document.getElementById('myCanvas');DOM要素を返します。それで、

var canvas = $('#myCanvas');

canvas[0]とdocument.getElementById('myCanvas');同じです。

次のようにjQueryコードを変更することもできます。

 window.onload = function() {
     var canvas = $('#myCanvas')[0]; // get the element here
     var ctx = canvas.getContext('2d');
            
     ctx.fillRect(10,50,100,200);
};
于 2012-07-20T06:41:10.860 に答える
0

このコード...

var canvas = $('#myCanvas');
var ctx = canvas.getContext('2d');

する必要があります...

var canvas = $('#myCanvas');
var ctx = canvas[0].getContext('2d');
于 2012-07-20T06:41:43.270 に答える
0

jqueryのget関数を使用して、canvas要素を取得できます。

var canvas = $('#myCanvas').get(0).getContext('2d');
于 2013-07-20T10:38:16.650 に答える