Table des matières
Lors de l'utilisation de l'article Toile pour dessiner, nous ne sommes pas limités à dessiner des figures rectangulaires, nous pouvons également dessiner en utilisant des coordonnées et le soi-disant chemins qui sont des chemins par lesquels nous indiquerons l'élément Toile où et comment montrer notre dessin.Les possibilités que cela nous donne sont impressionnantes, car avec les algorithmes nécessaires, nous pouvons faire des compositions illimitées, dessiner n'importe quel type de figure dans HTML5 et avec elle jusqu'à obtenir en conjonction avec d'autres éléments des résultats jamais imaginés dans les spécifications précédentes du langage.
Utilisation du chemin
Comme nous l'avons mentionné le chemin c'est ce qui nous permettra d'indiquer à la toile les coordonnées avec lesquelles le dessin doit être fait, avec ces coordonnées la toile pourra savoir où tracer les lignes correspondantes et à la fin avec l'accumulation correcte de lignes nous pouvons réaliser n'importe quel type de figurine.
Avant de passer aux exemples correspondants, il faut savoir quelles méthodes sont disponibles pour l'élément canvas et le chemin, voyons la liste suivante :
- débutChemin() : Cette méthode nous permet de commencer un nouveau chemin.
- fermerChemin (): Cette méthode essaie de fermer le chemin actuel en traçant une ligne de la fin de la dernière ligne aux coordonnées initiales.
- remplir (): Remplissez les formulaires décrits par les sous-chemins.
- isPointInPath (x, y): Renvoie true si le point spécifié est contenu dans la forme dessinée par le chemin actuel.
- ligneVers (x, y): Dessinez un sous-chemin aux coordonnées spécifiées.
- déplacer vers (x, y) : Il nous permet de nous déplacer vers les coordonnées spécifiées sans avoir à tracer un sous-chemin.
- rect (x, y, w, h): Dessinez un rectangle dont les coordonnées dans le coin supérieur gauche correspondent à (x, y) sa largeur correspond à w et sa hauteur correspond à h.
- caresser (): Dessinez les lignes extérieures des formes dessinées par le sous-chemin.
• On appelle la méthode commencerChemin.
• On passe à la position initiale en utilisant la méthode déménager à.
• On dessine les sous-chemins avec les méthodes ligne vers, etc.
• Optionnellement, nous pouvons appeler la méthode fermerChemin.
• Enfin on appelle les méthodes remplir ou alors alimenter.
Nous avons déjà l'ordre recommandé pour commencer à dessiner maintenant nous voyons le code correspondant dans HTML5.
Exemple Votre navigateur ne supporte pas l'élément Toile Comme on peut le voir, deux appels sont passés à commencerChemin(), avec cela nous pouvons commencer les zones de dessin sur le canevas puis avec moveTo () nous établissons les positions initiales et le reste est à dessiner.
Voyons à quoi ressemble notre dessin dans le navigateur :
