web-dev-qa-db-ja.com

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

私は次の作業コードを持っています：

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

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

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

試してください：

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

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

267
Matt

また、.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');
12
OG Sean
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を使用すると、canvas要素が完全に作成されてDOMに登録される前にcanvas要素を呼び出さないようにする簡単な方法です。

1
MistyDawn