HTML5 Canvas - 4.0 Écrire du texte sur le canevas avec fillText
Le canevas HTML5 ne sert pas qu'aux formes : il peut aussi afficher du texte. Cette leçon montre comment choisir la taille et la police, puis comment écrire un texte à une position donnée. Nous utilisons deux méthodes : fillText pour un texte plein, et strokeText pour un texte en contour.
Choisir la taille et la police
La propriété font règle la taille et la police du texte. On lui donne une seule chaîne de caractères, qui contient la taille puis la police souhaitée.
contexte.font = '<taille> <police>';Écrire le texte avec fillText et strokeText
La méthode fillText prend le texte, ses coordonnées X et Y, et enfin une taille maximale. Dans la vidéo, le texte est d'abord stocké dans une variable, puis affiché à la position indiquée.
La méthode strokeText s'utilise de la même façon. Elle dessine seulement le contour des lettres. Les deux textes apparaissent ensuite dans la page, avec la police choisie.
contexte.fillText('<votre-texte>', <x>, <y>, <largeur-max>);
contexte.strokeText('<votre-texte>', <x>, <y>, <largeur-max>);En résumé
Pour écrire sur le canevas, réglez d'abord la police avec la propriété font. Ensuite, fillText affiche le texte plein et strokeText en dessine le contour. Chaque texte reçoit ses coordonnées et sa taille maximale. La vidéo annonce une prochaine étape où ces textes seront réutilisés.
Points clés
- La propriété font règle la taille et la police du texte.
- fillText affiche un texte plein.
- strokeText dessine seulement le contour du texte.
- Les coordonnées X et Y placent le texte sur le canevas.
- La taille maximale est un paramètre complémentaire de la méthode.
Questions fréquentes
Où est placé le texte sur le canevas ?
Il est placé selon les coordonnées X et Y données à la méthode.
Quelle différence entre fillText et strokeText ?
fillText remplit les lettres, alors que strokeText n'en dessine que le contour.
Comment changer la police du texte ?
Modifiez la propriété font, en indiquant la taille puis la police, avant d'écrire le texte.