Attribut textAlign de Canvas
Définition et utilisation
textAlign Les propriétés sont définies ou retournées en fonction des points d'ancrage pour configurer ou obtenir l'alignement actuel du contenu du texte.
Généralement, le texte commence à l'emplacement spécifié, mais si vous définissez textAlign="right" et placez le texte à l'emplacement 150, alors il se terminera à l'emplacement 150.
Conseil :avec fillText() ou strokeText() Les méthodes dessinent effectivement le texte sur le canevas et le localisent.
Exemple
Créer une ligne rouge à l'emplacement 150. L'emplacement 150 est le point d'ancrage pour tous les textes définis dans l'exemple ci-dessous. Étudiez l'effet de chaque valeur de textAlign :
JavaScript :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Créer une ligne bleue à l'emplacement 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é. |
| fin | Le texte s'arrête à l'emplacement spécifié. |
| centre | Le centre du texte est placé à l'emplacement spécifié. |
| gauche | Alignement à gauche du texte. |
| droite | Alignement à droite du texte. |
Détails techniques
| Valeur par défaut : | start |
|---|
Compatibilité des navigateurs
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 :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.
