La méthode CanvasRenderingContext2D
.fillText()
de l'API Canvas 2D écrit un texte donné à la position (x, y) donnée. Si le quatrième paramètre optionnel donnant une largeur maximum est fourni, le texte sera mis à l'échelle pour s'adapter à cette largeur.
Voir aussi la méthode CanvasRenderingContext2D.strokeText()
pour dessiner un texte mis en forme.
Syntaxe
void ctx.fillText(texte, x, y [, largeurMax]);
Paramètres
texte
- Le texte à représenter en utilisant les valeurs en cours de
font
,textAlign
,textBaseline
, et dedirection
.
x
- La valeur de la coordonnée sur l'axe des x du point de début du texte.
y
- La valeur de la coordonnée sur l'axe des y du point de fin du texte.
largeurMax
Facultatif- La largeur maximum à dessiner. Si spécifiée, et si la longueur calculée de la chaîne est supérieure à cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (s'il en existe une ou s'il peut en être synthétisée une raisonnablement lisible en mettant à l'échelle horizontalement la police en cours) ou une plus petite police.
Exemples
Utilisation de la méthode fillText
Ceci est seulement un fragment de code simple utilisant la méthode fillText
.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.font = '48px serif';
ctx.fillText('Hello world', 50, 100);
Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas :
Spécifications
Spécification | Statut | Commentaire |
---|---|---|
HTML Living Standard La définition de 'CanvasRenderingContext2D.fillText' dans cette spécification. |
Standard évolutif |
Compatibilité des navigateurs
Nous convertissons les données de compatibilité dans un format JSON.
Ce tableau de compatibilité utilise encore l'ancien format
car nous n'avons pas encore converti les données qu'il contient.
Vous pouvez nous aider en contribuant !
Fonctionnalité | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Support de base | (Oui) | (Oui) | 3.5 (1.9.1) | 9 | (Oui) | (Oui) |
Fonctionnalité | Android | Chrome pour Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Support de base | (Oui) | (Oui) | (Oui) | 1.0 (1.9.1) | (Oui) | (Oui) | (Oui) |
Voir aussi
- L'interface la définissant,
CanvasRenderingContext2D
CanvasRenderingContext2D.strokeText()