CanvasRenderingContext2D.fillText()
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
js
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
html
<canvas id="canvas"></canvas>
JavaScript
js
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 :
Code jouable
Spécifications
Specification |
---|
HTML Standard # dom-context-2d-filltext-dev |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- L'interface la définissant,
CanvasRenderingContext2D
CanvasRenderingContext2D.strokeText()