On continue ensemble l’apprentissage de l’API JavaScript Canvas pour dessiner.
Dans ce cours vous allez apprendre à créer des formes colorées avec entre autre les courbes de Bézier.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Créez des courbes de Bézier, des formes avec des couleurs avec API JavaScript Canvas
Bonjour à tous et bienvenu sur Développement Facile.
Ici Mathieu expert en développement applicatif, on continue la suite de cette série de cours vidéo dédiée à la balise Canvas, vous allez découvrir l’API Canvas avec JavaScript pour dessiner sur une page Web et au final, créer des animations ou des jeux vidéo, des applications beaucoup plus évoluées avec le langage JavaScript.
Canvas avec JavaScript
Dans cette deuxième partie vous allez apprendre à utiliser, à créer des courbes quadratiques avec la fonction quadraticCurveTo, ça va vous permettre de créer des courbes de Béziers avec la fonction bezierCurveTo, donc les courbes quadratiques d’un côté et les courbes de Béziers de l’autre, vous avez deux méthodes que vous pouvez utiliser, quadratique avec le point de contrôle X, le point de contrôle Y, la destination X, la destination Y, et votre courbe de Béziers avec tous les paramètres, en fait vous à travers un exemple de code source je vous montrerait exactement les paramètres, ce sera beaucoup plus simple pour vous à les comprendre.
Vous pouvez également modifier la couleur des formes que vous dessinez, par défaut elles sont en noires mais vous pouvez utiliser des attributs JavaScript pour définir une autre couleur, vous avez filStyle c’est la couleur de remplissage via les fonctions fill et fillRect, vous avez strokeStyle c’est ça permet de définir la couleur des contours via les fonctions stroke et strokeRect, d’un côté vous pouvez définir la couleur de remplissage d’un élément et de l’autre côté, la couleur du contour d’un élément.
Vous avez également la possibilité d’écrire du texte avec JavaScript donc ça ressemble beaucoup à l’ActionScript comme je vous le disait dans le cours précédent, ActionScript, flash, vous avez plusieurs attributs font, vous définissez la taille et la police de caractères utilisée, par exemple en 16 px Arial, textAlign ça va vous permettre de choisir l’alignement du texte sur la largeur, donc vous avez plusieurs valeurs start, left, right, center pour aligner votre texte, texteByLine ça va lier votre texte sur la hauteur donc vous avez plusieurs valeurs possibles, top, hanging, middle, alphabétique, idéographic et bottom, et donc après avoir modifié la valeur de ces attributs vous allez écrire le texte avec ces deux fonctions, fillText c’est pour écrire un texte normal et vous avez strokeText c’est pour écrire un texte avec seulement les contours de dessinés, en fait ça va dessiner des lettres creuses, vous aurez seulement le contour des lettres, donc fillText et strokeText c’est les mêmes paramètres simplement vous décidez de votre chaîne de caractères à écrire, votre texte, la position en X, la position en Y et la taille maximum de votre texte c’est aussi simple que ça.
Voir les exemples JavaScript
On va voir un exemple avec plusieurs exemples de code source ensemble déjà pour dessiner des cours quadratiques, des courbes de Béziers ensuite pour dessiner des formes en modifiant la couleur des contours et la couleur de remplissage et vous allez apprendre à écrire du texte dans une image, au finale avec l’API Canvas dessin ça créé une image tout simplement et donc là vous allez écrire votre texte soit avec les lettres creuses ou les lettres pleines, tout simplement, donc c’est parti pour l’exemple de code source.
Dans cet exemple de code source il ya toujours la balise Canvas avec une largeur et une hauteur, c’est votre zone de travail en fait dans laquelle vous allez dessiner toutes vos formes, tous vos éléments, comme d’habitude on a que le fichier JavaScript qui va contenir tout le code, il y a le fichier CSS qui est ici, et la balise viewport pour indiquer les caractéristiques d’affichage sur un Smartphone ou une tablette. Le fichier CSS ne change pas, par contre le fichier JavaScript comme d’habitude, on écoute l’événement downContentModel et une fois que cet événement est diffusé on va commencer à dessiner, alors là on récupère notre balise Canvas, getelementbyid, l’id name canvas qui est ici, on le récupère le contexte en 2D on le récupère et donc là, on va dessiner une courbe de Béziers avec les différentes paramètres et une courbe quadratique avec les différents paramètres et on va donner une couleur de remplissage, vu que vous avez vu dans ce cours qu’on peux remplir les formes, plutôt que d’utiliser tous le temps le noir, vous donnez une couleur HTML tout simplement. Ensuite c’est la technique pour dessiner un rectangle avec les bords arrondis, ici, et là on donne une couleur aux contours, on dessine un autre rectangle et la on choisit la taille de la police, la police que l’on va utiliser, et on renseigne le texte et bien évidemment on positionne le texte ce qui donne ici les deux courbes dessinées au départ, le rectangle avec les bords arrondis qui est ici, là le rectangle avec la couleur du contour qui est ici et le texte en police 33, si je mets par exemple une police un peu plus petite, 29 en changeant le texte, tout simplement ici, ça va donner cela, voilà bienvenu sur développement facile, je peux mettre un texte beaucoup plus gros, je pense que ça va sortir de la zone de dessin parce qu’il y a une zone de dessin qui est définie, donc vous voyez on atteint la limite de la zone de dessin ici, c’est très simple à utiliser, vraiment l’API JavaScript, l’API Canvas et une fois que vous connaissez toutes ses fonctions, vous savez jouer avec, mettre des couleurs sur les contours, des couleurs de remplissage, vous allez beaucoup vous amuser.
Votre plan d’actions !
Maintenant c’est à vous de jouer continuez d’utiliser ces méthodes de l’API Canvas les propriétés pour faire des dessins de plus en plus évolués qui se rapprochent de votre application ou de votre jeu que vous êtes en train de créer, maintenant vous pouvez télécharger sous cette vidéo le code source, comme d’habitude, vous pouvez également poser toutes vos questions l’équipe développement facile vous répondra et je vous invite à aller dans la deuxième vidéo, vous avez un lien, une image cliquez ici pour lancer la deuxième vidéo, dans la deuxième vidéo, vous allez aller beaucoup plus loin dans le développement et le JavaScript par exemple, programmation orienté objet, la programmation événementielle, les designs patterns, les frameworks, vous allez découvrir tout ça dans la deuxième vidéo, vous pouvez même me poser toutes vos questions et je vous réponds avec des exemples de code source, tout est dans la deuxième vidéo, je vous retrouve tout de suite dans la deuxième vidéo, cliquez simplement sur le lien, sur l’image, lancer la deuxième vidéo, je vous dis à tout de suite dans la deuxième vidéo.
[/ppmtoggle][/ppmaccordion]
Télécharger l’exemple d’utilisation des courbes de Bézier avec l’API Canvas
Retrouvez le code source de l’exemple vu dans la vidéo
Téléchargement du code source Canvas JavaScript Part 2
