Canvasのコンテキストを取得するのと同等のjQuery

次の作業コードがあります。

ctx = document.getElementById("canvas").getContext('2d');

使用するように書き直す方法はあります$か？これを行うと失敗します。

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

試してください：

$("#canvas")[0].getContext('2d');

jQueryは実際のDOM要素を数値インデックスで公開し、通常のJavaScript / DOM関数を実行できます。

また、.get（0）を使用してjqueryターゲットをHTML要素として参照することがしばしば推奨されることも確認しました。

var myCanvasElem = $("#canvas").get(0);

おそらく、jqueryはオブジェクトとしてnullを返しますが、.get（0）からの要素の操作はそれほど静かに失敗しないので、潜在的なnullオブジェクト参照を回避するのに役立つでしょう... .get（0の前にキャンバスが最初に見つかったかどうかを簡単に確認できます。 ） お気に入り

if( $("#canvas").length ) ctx = $("#canvas").get(0).getContext('2d');
else console.log('Error: Canvas not found with selector #canvas');

try{ 
   ctx = $('#canvas').get(0).getContext('2d');
}catch(e){ 
    console.log('We have encountered an error: ' + e);
}

または...

if( typeof $('#canvas') === 'undefined'){ 
    var canvas = '<canvas id="canvas"><\/canvas>';
    $('body').append(canvas);
}
setTimeout( function(){ ctx = $('#canvas').get(0).getContext('2d'); }, 500);

setTimeoutを使用すると、完全に作成されてDOMに登録される前にcanvas要素を呼び出さないようにする簡単な方法です。

スクリプトが「キャンバス」を見つける前に機能する

 $(document).ready(function() {
   ctx = $("#canvas");
});