jQuery équivalent d'obtenir le contexte d'un Canvas


155

J'ai le code de travail suivant:

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

Existe-t-il un moyen de le réécrire pour l'utiliser $? Faire cela échoue:

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

Réponses:


282

Essayer:

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

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


13

J'ai également 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 aider à éviter toute référence potentielle d'objet nul puisque jquery renvoie null en tant qu'objet mais travailler avec l'élément de .get (0) peut ne pas échouer si silencieusement ... Vous pouvez facilement vérifier si le canevas a été trouvé avant .get (0 ) comme

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

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

L'utilisation de setTimeout est un moyen facile de vous assurer que vous n'essayez pas d'appeler l'élément canvas avant qu'il ne soit entièrement créé et enregistré dans le DOM.


Cette question a été posée 8 ans avant votre réponse. Vérifiez la date à laquelle elle a été posée avant de répondre!
Rojo

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.