2011-10-21 2 views
1

Il s'agit plus d'une question jquery qu'une question html5, mais un bon exemple non-le-moins.2d toile en utilisant jquery

<html> 
    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       context = $("#mainCanvas")[0].getContext("2d"); 
       alert(context); 

       context.fillStyle = "rgb(200,0,0)"; 
       context.fillRect (10, 10, 55, 50); 

       context.fillStyle = "rgba(0, 0, 200, 0.5)"; 
       context.fillRect (30, 30, 55, 50); 
      }); 
     </script> 
    </head> 
    <body> 
     <canvas id="mainCanvas" width="800" height="600"> 
     </canvas> 
    </body> 
</html> 

Pour appeler la fonction « getContext » sur l'objet de la toile, je dois index dans l'objet jquery comme ceci:

$("#mainCanvas")[0].getContext("2d") 

Ayant besoin d'index dans l'objet est maladroit et non intuitive . Ma question est, y at-il pas un moyen pour jquery d'inférer qu'une fonction "manquante" sur l'objet jquery serait contenue dans l'objet enveloppé automatiquement? Y a-t-il un tour de syntaxe jquery qui me manque?

Merci.

Répondre

4

Il n'existe aucun moyen de remplacer un appel à une méthode Javascript manquante dont je suis au courant. C'est dommage aussi, puisque je pourrais vraiment utiliser quelque chose comme ça pour un problème sur lequel j'ai travaillé récemment. Le mieux que vous pouvez faire est une sorte d'enveloppe de fonction, comme ceci:

callFunction(obj, "methodName", [args], function() { /*fallback*/ }); 

Mais ce n'est pas terriblement jolie et la performance sera moins que bon. shrug

Dans votre cas, cependant, est-ce vraiment si mauvais? Vous n'allez faire qu'un seul appel et mettre en cache le contexte graphique pour tous vos autres appels. Si la syntaxe d'index est vraiment tout ce qui vous choque, va jQuery moins pour cet appel est également une option plus propre:

var ctx = document.getElementById("mainCanvas").getContext("2d"); 

C'est aussi va être un tantinet plus rapide, si vous vous souciez de telles choses. Vraiment, jQuery fournit à peu près rien quand il s'agit de la manipulation de la toile.

+0

Merci pour la réponse :) Oui, jquery ne m'achète pas beaucoup en déconnant avec un élément de toile, mais mon esprit pense en jquery maintenant. Chaque fois que je vois quelque chose ressemblant à "getelementby ..." mon cerveau dit "NON! Signe du dollar! DOLLAR SIGN !!! $$$$" Je pensais que ce serait plus d'une discussion philosophique. – feathj