web-dev-qa-db-fra.com

jQuery équivaut à obtenir le contexte d'un canevas

J'ai le code de travail suivant:

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

Est-il possible de le réécrire pour utiliser $? Cela échoue:

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

Essayer:

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

jQuery expose l'élément DOM actuel dans des index numériques, où vous pouvez exécuter des fonctions JavaScript/DOM normales.

256
Matt

J'ai aussi vu qu'il est souvent préférable d'utiliser .get (0) pour référencer une cible jquery en tant qu'élément HTML:

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

Peut-être pour éviter toute référence d'objet null potentielle puisque jquery renvoie null en tant qu'objet mais que travailler avec l'élément de .get (0) peut ne pas échouer si silencieusement ... Vous pouvez facilement vérifier si la toile a été trouvée avant .get ) comme 

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

ou...

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

Utiliser setTimeout est un moyen facile de ne pas essayer d'appeler l'élément canvas avant qu'il ne soit entièrement créé et enregistré dans le DOM.

0
MistyDawn