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');
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.
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');
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.