jQuery Äquivalent den Kontext einer Leinwand bekommen

Question

Ich habe folgende Arbeits Code:

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

Gibt es eine Möglichkeit, es neu zu schreiben $ zu benutzen? Dadurch schlägt fehl:

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

Answer 1

Versuchen:

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

jQuery macht die tatsächliche DOM-Element in numerischen Indizes, bei denen Sie normale JavaScript/DOM-Funktionen ausführen können.

Answer 2

ich auch gesehen, dass es oft zu verwenden .get bevorzugt ist (0) ein jquery Ziel als HTML-Element zu verweisen:

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

Vielleicht mögliche Nullobjektreferenzen vermeiden zu helfen, da jquery als null zurückgibt Objekt, sondern die Arbeit mit dem Elemente aus .get (0) möglicherweise nicht so leise scheitern ... Sie können ganz einfach überprüfen, ob die Leinwand zuerst gefunden wurde, bevor .get (0) wie

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

Answer 3

das Skript funktioniert, bevor er feststellt, "Leinwand"

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