L'équivalent en jQuery de la récupération du contexte d'un Canvas

Question

J'ai le code suivant qui fonctionne :

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

Y a-t-il un moyen de le réécrire pour utiliser $ ? En faisant cela, j'échoue :

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

Answer 1

Essayez :

$("#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.

Answer 2

J'ai également constaté 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 d'objet nulle potentielle, puisque jquery renvoie null comme 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 suit

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

Answer 3

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 simple de s'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.

Answer 4

Vous pouvez également être intéressé par ma récente bibliothèque qui vous permet d'utiliser HTML5 Canvas avec une syntaxe similaire à celle de jQuery. CanvasQuery

Answer 5

Le script fonctionne avant de trouver "canvas".

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