HTML5 Canvas - 4.1 Styliser les textes du canvas
Dans la leçon précédente, nous avons dessiné des textes simples sur le canvas. Cette leçon montre comment leur donner du style : graisse, taille et famille de police. Ces réglages permettent de personnaliser l'apparence d'un texte sans modifier la structure de la page.
Reprendre les textes de la leçon précédente
Le point de départ est le même code que dans la leçon précédente. Les textes déjà dessinés sur la toile servent de base aux modifications.
Pour chaque texte, on déclare ses réglages de police avant de le dessiner. La vidéo montre deux textes : l'un en style normal, l'autre en italique.
Choisir le style, la taille et la famille
Ces trois réglages s'écrivent dans une seule déclaration de police. La forme générale est la suivante, où le style est normal ou italique.
ctx.font = "<style> <taille>px <famille>";- Le style : normal ou italique.
- La taille de la police.
- La famille de police, par exemple fantasy ou Times.
Vérifier le résultat dans la page
Ouvrez la page HTML avec Live Server. Les deux textes apparaissent, l'un en italique et l'autre en style normal.
La famille de police se vérifie aussi. Le texte en fantasy et le texte en Times ne présentent pas le même rendu, ce qui permet de repérer le changement.
En résumé
Le style d'un texte sur un canvas se règle avec la graisse, la taille et la famille de police. Chaque texte reçoit ses propres réglages avant d'être dessiné. Ouvrir la page dans Live Server permet de vérifier le résultat. Les prochaines leçons poursuivent le travail sur la toile.
Points clés
- Un texte de canvas reçoit ses réglages de police avant d'être dessiné.
- Le style peut être normal ou italique.
- La taille et la famille de police se règlent dans la même déclaration.
- La famille peut être par exemple fantasy ou Times.
- Le résultat se vérifie en ouvrant la page avec Live Server.
Questions fréquentes
Faut-il déclarer la police pour chaque texte ?
Oui. Dans la vidéo, chaque texte reçoit ses propres réglages avant d'être dessiné, ce qui permet d'avoir des styles différents.
Quelles familles de police sont utilisées dans la vidéo ?
La vidéo montre la famille fantasy et la famille Times. Elles donnent des rendus différents.
Comment vérifier le résultat ?
Ouvrez la page HTML avec Live Server. Les textes s'affichent avec les styles déclarés dans le code.