Niveau : Confirmé

Introduction à Canvas

Tutoriel par (Développeur, Strasbourg)
Créé le , mis à jour le (20034 lectures)
Tags : canvas

Sommaire


Conclusion et frameworks

Comment vous l'aurez constaté, l'élément <canvas> met à disposition des fonctions d'assez bas niveau : chemins, formes, arcs, images, dégradés, pour arriver à une mise en scène complexe il faut faire preuve de persévérance et maîtriser les calculs en JavaScript... en attendant la démocratisation d'outils tout-en-un pour générer le code attendu. L'accélération matérielle des navigateurs promet de belles réalisations toujours plus époustouflantes. Canvas n'est pas figé et va encore évoluer pour être doté d'autres méthodes de dessin.

Et l'animation ?

Ce tutoriel n'ayant abordé que le contexte 2D "statique", il faut bien l'avouer : les démonstrations les plus époustouflantes présentées restent celles axées autour des possibilités d'animation et d'interaction (clavier/souris/manettes voire webcam), en combinaison avec JavaScript. Ceci sera abordé dans d'autres articles, car le sujet est extrêmement vaste. La partie "3D" fait appel à WebGL, déclinaison d'OpenGL pour le web qui est aussi un sujet bien spécifique réclamant de solides compétences en programmation 3D.

Frameworks et bibliothèques

Pour gagner en efficacité et en temps de développement, une des meilleures solutions reste de faire appel à des frameworks bien pensés. Ceux-ci contiendront un ensemble de fonctions de plus haut niveau (faisant appel bien sûr à celles de Canvas) pour produire plus rapidement un résultat, facilité la manipulation des pixels, des formes, et surtout l'animation. Voici quelques bibliothèques célèbres :

Références et documentation

N'oubliez pas de consulter aussi les tutoriels suivants sur une autre manière d'aborder la 2D dans le navigateur : en vectoriel avec SVG.

Commentaires

Didodu258 a dit le

Très bon tutoriel.
J'ai une remarque pour ceux qui voudrait essayer le programme de la section "Retouche des pixels" dans le chapitre "Jouer avec les Pixels".

Il semblerait que la plupart des navigateurs modernes n'exécutent pas la ligne contenant le getImageData pour des mesures de sécurité (quelques informations disponibles ici : goo.gl/p64w8 mais ça reste encore flou pour moi).

J'ai trouvé une solution sur le site stackoverflow.com pour ceux qui n'aurait pas d'hébergement et qui désirerait quand même utiliser ce code : il faut exécuter le script dans un serveur local (localhost). Personnellement j'ai utilisé wampserver et ça fonctionne parfaitement.

À part faire comme ça je n'ai pas trouvé d'autres solutions, si quelqu'un pouvait en dire plus...
(et si on pouvait ne pas supprimer mon commentaire...)

dew a dit le

C'est en effet une restriction de sécurité : il faut utiliser les ressources du domaine qui héberge déjà la page (afin de ne pas extraire les informations d'un domaine tiers). Donc localhost peut fonctionner pour les tests (plutôt qu'une adresse IP, ou un accès via file:// qui ne permet pas d'appliquer une règle de sécurité propre à un domaine).