Attribut textAlign du canvas HTML
Définition et utilisation
textAlign L'attribut définit ou retourne le mode d'alignement actuel du contenu du texte en fonction de l'ancrage.
Généralement, le texte commence à partir de la position spécifiée, mais si vous définissez textAlign="right" et placez le texte à la position 150, alors il se terminera à la position 150.
Avis :utilisé fillText() ou strokeText() Les méthodes dessinent effectivement le texte sur le canevas et le positionnent.
Exemple
Créer une ligne rouge à la position 150. La position 150 est le point d'ancrage pour tous les textes définis dans l'exemple suivant. Étudiez l'effet de chaque valeur de textAlign :
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Créer une ligne bleue à la position 150
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Afficher différentes valeurs de textAlign
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);
Syntaxe
context.textAlign="center|end|left|right|start";
Valeur de l'attribut
| Valeur | Description |
|---|---|
| start | Par défaut. Le texte commence à l'emplacement spécifié. |
| end | Le texte s'arrête à l'emplacement spécifié. |
| center | Le centre du texte est placé à l'emplacement spécifié. |
| left | Alignement à gauche du texte. |
| right | Alignement à droite du texte. |
Détails techniques
| Valeur par défaut : | start |
|---|
Support du navigateur
Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Remarque :Les versions d'Internet Explorer 8 et antérieures ne prennent pas en charge l'élément <canvas>.
