Vous pourrez ainsi dessiner et même animer toutes sortes d’objet dans le navigateur du visiteur.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment utiliser l’API JavaScript Canvas pour dessiner
Bonjour à tous et bienvenu sur Développement Facile.
Ici Matthieu expert en développement applicatif, dans cette nouvelle vidéo vous allez apprendre à découvrir une API dessin indispensable à connaître en JavaScript notamment pour créer des jeux vidéo ou des applications de plus en plus évolués, il s’agit de l’API Canvas qui va vous permettre de créer tous vos graphismes, de gérer vos graphismes avec le langage JavaScript.
Canvas avec JavaScript
Avec Canvas vous pouvez par exemple dessiner des formes, effectuer des transformations sur les objets, rotation, les déplacer, zoom/dézoom, composer avec plusieurs images, créer des lignes, remplir des dessins avec de la couleur, ajouter du style, ajouter des effets d’ombres, des filtres, vous pouvez également créer du texte et manipuler très précisément des pixels. Si vous avez déjà développé avec ActionScript avec Flash, vous allez retrouver exactement les mêmes fonctionnalités sauf que l’API JavaScript est bien évidemment différente de l’API ActionScript, il y a quelques similitudes, vous ne serez pas totalement perdus.
Le Canvas c’est un conteneur, c’est une balise, comme une balise div, qui peut contenir un ou plusieurs éléments graphiques, donc après l’avoir créée votre balise Canvas, vous allez utiliser des scripts en JavaScript pour remplir cette balise, tout simplement. La balise Canvas c’est pour créer la balise dans un fichier HTML, prévoyez un espace suffisamment grand dans la page justement, pour contenir tous vos éléments graphiques.
getContext 2D ou 3D, ça va vous permettre d’utiliser la fonctionnalité du canevas en deux dimensions, donc vous récupérez ainsi le contexte de l’objet et c’est là où vous allez pouvoir appeler plusieurs méthodes pour créer les différentes formes, dessiner le texte etc.
fillRect avec coordonnées en x, coordonnées en y, la longueur, la hauteur, ça vous permet de dessiner un rectangle avec ces quatre paramètres, vous avez strokeRect pour dessiner les contours d’un rectangle, et clearRect pour dessiner un rectangle invisible.
Création d’un cercle avec Canvas
Vous pouvez bien évidemment, créer un cercle avec l’API Canvas, la création d’un cercle est faite grâce à la fonction contexte 2D arc, donc vous définissez un arc de cercle, et au final ça fait un cercle, donc les coordonnées x, les coordonnées y, vous donnez le rayon, l’angle de début, l’angle de fin, et l’inverse des aiguilles d’une montre, un booléen pour déterminer si le dessin est dans le sens des aiguilles d’une montre, ou pas, ou dans l’autre sens et donc arc, ça vous permet de dessiner votre cercle avec tous ces paramètres.
Création d’une ligne avec Canvas
Bien évidemment vous pouvez créer des lignes avec Canvas, ça va vous permettre de créer des formes plus ou moins complexes, vous avez la méthode lineTo avec deux paramètres X la coordonnée en X pour le début du dessin et Y les coordonnées en Y pour la fin de la ligne, c’est là que vous définissez une ligne. Vous avez également la méthode moveTo qui permet de bouger vers un point et donc elle va ensemble, elle est utilisée conjointement avec la méthode lineTo.
Voir les exemples JavaSccript
Justement vous allez voir un exemple pour mettre toutes ces méthodes en pratique, donc pour dessiner un rectangle, pour dessiner un cercle, pour dessiner plusieurs lignes, on passe tout de suite à la démonstration pratique avec le code source.
Pour utiliser l’API Canvas en JavaScript il n’y a rien de très compliqué, il suffit de connaître les méthodes à appeler avec les paramètres à leurs transmettre, déjà vous créez votre balise Canvas, en donnant un id unique, une largeur et une hauteur et après vous pouvez travailler dedans, créer vos formes, dessiner les différents éléments. Comme d’habitude le fichier JavaScript, le fichier CSS et la balise viewport. Le fichier CSS ne change pas, classique, par contre tout est dans le fichier JavaScript, donc on écoute toujours l’événement au chargement du DOM, on récupère notre balise Canvas, donc rappelez-vous la balise Canvas qui est ici, on la récupère, on fait un getcontext pour pouvoir dessiner dedans en 2D et là on dessine un rectangle avec les coordonnées en x y, la largeur, la hauteur, on va dessiner les contours du rectangle, la bordure extérieure, et on va dessiner dedans avec un rectangle ça fera une bordure sur le rectangle de cette façon donc là c’est le rectangle invisible qu’on a dessiné, le rectangle global et la bordure, donc c’est ici, le rectangle global, les contours et le rectangle du milieu donc qui est invisible, donc ça fait un petit effet sympathique ensuite pour dessiner un cercle on définit on renseigne les différents paramètres, l’angle et ça créé des arcs de cercles tout du long, donc le X, le Y, la taille et à chaque fois ça permet de créer un cercle qui est rempli grâce à fil pour remplir l’intérieur du cercle, là pour dessiner une ligne, X et Y lineTo pour lui indiquer ou aller et donc ça permet de dessiner une ligne donc là je vais assez vite parce que après c’est à vous d’utiliser les différentes méthodes sur l’objet contexte de l’API Canvas et donc en fonction de ce que vous souhaitez dessiner, des cercles, des rectangles, des formes avec les lignes, et bien vous allez pouvoir vous amuser à créer des choses beaucoup plus avancées que ce que j’ai fait dans l’exemple tout simplement.
Votre plan d’actions !
Maintenant c’est à vous de jouer, à votre tour d’utiliser l’API canvas avec JavaScript pour dessiner justement, pour faire des dessins et au final ça va vous permettre de créer des applications beaucoup complexes et des jeux vidéo avec JavaScript, comme d’habitude sous cette vidéo vous retrouverez le code source en téléchargement, vous pouvez également poser votre question et l’équipe développement facile vous répondra, maintenant vous avez un lien, une image là cliquez ici pour lancer la deuxième vidéo. Je vous invite dans la deuxième vidéo à découvrir comment utiliser les fonctionnalités avancées de JavaScript, par exemple, la programmation orientée objet, la programmation événementielle, les designs patterns, découvrir tout ça dans le détail pour créer des applications JavaScript performantes à chaque fois et deux à trois fois plus rapidement ; à travailler en équipe donc tout ça c’est dans la deuxième vidéo, cliquez sur le lien lancer la vidéo deux, sur l’image je vous dit à tout de suite dans la deuxième vidéo pour tout vous expliquer tout en détail, à tout de suite.
[/ppmtoggle] [/ppmaccordion]
Télécharger le code pour dessiner avec JavaScript
Retrouvez ci-dessous le code source commenté de l’exemple de dessin vu dans la vidéo
