J'essaye de me mettre à dessiner en javascript, grâce à l'élément <canvas>. Pour le moment, je tâtonne : j'ai trouvé comment dessiner des cercles, des traits… Le site Dive Into HTML5 est une bonne introduction.
Mais après avoir essayé de dessiner une petite bestiole en 2D, je me suis retrouvé avec deux cercles, et quelques traits pour le corps et les bras.
En clair, ça soûle rapidement. J'ai donc commencé à chercher des librairies javascript pour rendre le dessin plus facile à réaliser, et j'ai trouvé Raphaël.
Raphaël propose de nombreuses fonctions de dessin et d'animation; les traits peuvent être définis comme dans un fichier SVG, par exemple M 100 100 L 300 100 L 200 300 z pour dessiner un triangle :
- Move to (aller au point) 100,100
- Line to (tracer jusqu'au point) 300,100
- Line to 200,300
- et "z" pour fermer la figure (c.à.d retourner au point 100,100)
Prochaine étape donc, utiliser Raphël pour dessiner une bestiole, par exemple un moustique (vu de haut). Ensuite, je tenterai de l'animer.
Si j'arrive à compléter le projet que j'ai en tête, j'espère que javascript sera assez rapide pour rendre les animations fluides.
Commentaires
Autre possibilité: utiliser une couche d'abstraction du type "Dojo GFX"
http://dojotoolkit.org/reference-guide/dojox/gfx.html
Ca permet d'avoir une API unique, et de choisir son implémentation ensuite, voir meme de choisir automatiquement l'implementation selon les possibilités offertes par le client (Silverlight sur IE, HTML5 sous chrome/firefox par exemple)
Tres pratique, et en plus on peut beneficier du modele objet pour creer des formes héritant d'autres, assez utile par exemple pour créer des schemas (eg: "rounded box" hérite de "box" en ajoutant simplment des coins arrondis)
Cool, merci pour le lien !
L'ajout de commentaires est désactivé.
