CanvasRenderingContext2D.textAlign
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La propriété CanvasRenderingContext2D.textAlign
de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode CanvasRenderingContext2D.fillText
Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%*width.
Syntaxe
ctx.textAlign = "left" || "right" || "center" || "start" || "end";
Options
Valeurs possibles :
- left
-
Le texte est aligné à gauche.
- right
-
Le texte est aligné à droite.
- center
-
Le texte est centré.
- start
-
Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche).
- end
-
Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche).
La valeur pa défaut est start
.
Exemples
Utilisation de la propriété textAlign
Ceci est seulement un fragment de code simple utilisant la propriété textAlign pour indiquer un alignement de texte
.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "48px serif";
ctx.textAlign = "left";
ctx.strokeText("Hello world", 0, 100);
Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :
Code jouable
Spécifications
Specification |
---|
HTML Standard # dom-context-2d-textalign-dev |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- L'interface la définissant,
CanvasRenderingContext2D
.