wake-up-neo.com

jQuery entspricht dem Abrufen des Kontextes eines Canvas

Ich habe den folgenden Arbeitscode:

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

Gibt es eine Möglichkeit, es neu zu schreiben, um $ zu verwenden? Dies schlägt fehl:

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

Versuchen:

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

jQuery macht das eigentliche DOM-Element in numerischen Indizes verfügbar, in denen Sie normale JavaScript/DOM-Funktionen ausführen können.

256
Matt

Ich habe auch gesehen, dass es oft vorgezogen wird, ein Jquery-Ziel mit .get (0) als HTML-Element zu referenzieren:

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

Möglicherweise hilft dies, um mögliche Null-Objektreferenzen zu vermeiden, da Jquery Null als Objekt zurückgibt. Das Arbeiten mit dem Element von .get (0) kann jedoch nicht so unbemerkt fehlschlagen ) mögen 

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);
}

oder...

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

Die Verwendung von setTimeout ist eine einfache Methode, um sicherzustellen, dass Sie nicht versuchen, das Canvas-Element aufzurufen, bevor es vollständig erstellt und im DOM registriert ist.

0
MistyDawn