Table des matières
Avec les différentes méthodes de dessin vues dans le Toile Il est possible de définir des zones à l'intérieur de celles-ci à dessiner, bien que cela soit un peu plus complexe c'est tout à fait faisable, cependant on a aussi la possibilité d'obtenir le même résultat en utilisant la méthode clip().Un autre aspect qui peut également être intégré dans le la toile est le dessin du texte, peut-être pensons-nous qu'en utilisant CSS et d'autres éléments, nous pouvons dessiner un texte identique ou meilleur, tout en étant dans le Toile nous permet d'appliquer des animations natives dans HTML5.
Méthode de découpage
Comme nous l'avons mentionné au début, cette méthode simplifie la façon de comment pouvons-nous créer une section dans un canevas, pour pouvoir introduire d'autres éléments dessinés, comme un nouveau dessin ou le remplir d'une couleur spécifique.
Pour utiliser cet outil, nous devons appeler la méthode agrafe (), cette méthode crée une région de coupure ou une nouvelle section, voyons dans le code suivant comment cela fonctionne :
Exemple Votre navigateur ne supporte pas l'élément Toile Dans ce code, nous dessinons d'abord un grand rectangle en jaune, puis nous créons une nouvelle région à l'intérieur en utilisant le méthode clip() et à l'intérieur de cette région, nous générons un nouveau rectangle rouge.
Voyons à quoi cela ressemble dans notre navigateur :
Nous pouvons également dessiner du texte dans un canevas, pour cela nous avons les méthodes suivantes :
fillText (, x, y, largeur): Dessine et remplit le texte spécifié dans le premier paramètre à la position (x, y). Aussi, son argument largeur il est facultatif mais lorsqu'il est déclaré, il définit une limite sur la largeur du texte.
strokeText (, x, y, largeur): Dessine et laisse le texte sans remplissage à la position (x, y). Comme la méthode précédente dans son argument facultatif, elle limite la largeur du texte.
Voyons l'exemple suivant sur la façon d'utiliser ces méthodes pour dessiner du texte sur notre canevas :
Exemple Votre navigateur ne supporte pas l'élément Toile Dans ce code, nous utilisons les deux méthodes pour dessiner le même texte, à la fois dans la même position mais avec une couleur différente avec laquelle nous obtenons un effet de cadre extérieur d'une couleur et un remplissage d'une autre couleur, avec cela nous pouvons établir un plus différence marquée entre fillText Oui strokeText.
Enfin et pour terminer ce tutoriel, voyons à quoi il ressemble dans le navigateur.
