2 votes

Comment affecter l'objet HTML5 canvas à une variable en utilisant Jquery ?

Pourquoi, dans le code ci-dessous, seule la version Javascript explicite fonctionne, mais pas la version Jquery (commentée) ?

 <html>
     <head>
         <title>Canvas Tutorial</title>
         <script type="text/javascript" src="./jquery-1.6.3.min.js"></script>
     </head>
     <body>
         <canvas id="can" width="150" height="150">Fallback</canvas>
         <script type="text/javascript">
             //var can = $("#can").get();
             var can = document.getElementById("can");
             var ctx = can.getContext('2d');
         </script>
     </body>
 </html>

Je continue à recevoir la notification que

TypeError: 'undefined' is not a function (evaluating 'can.getContext('2d')')

2voto

Fabrício Matté Points 26309

Parce que .get sans passer de paramètre renvoie une structure de type tableau. Vous devriez utiliser :

var can = $("#can").get(0);

Ou la sténographie :

var can = $("#can")[0];

Pour obtenir la référence de l'élément DOM.

Violon

De la documentation :

Sans paramètre, .get() renvoie tous les éléments. [...]

Tous les nœuds DOM correspondants sont retournés par cet appel, contenus dans un fichier tableau standard.

Essais :

>>> var can = $("#can").get(); console.log(can instanceof Array);
true
>>> var can = $("#can").get(0); console.log(can instanceof Array);
false

0voto

Adam Points 14766

Utilisez le Sélecteur d'identification jQuery pour sélectionner l'élément de la toile avec l'option can ID. Cela vous donnera un objet jQuery. Chaque objet jQuery se fait passer pour un tableau, de sorte que vous pouvez utiliser le déréférencement standard des tableaux pour obtenir l'élément DOM sous-jacent. (Voir : http://api.jquery.com/get/ )

var can = $("#can")[0];
var ctx = can.getContext('2d');

Essayez-le !

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X