Exemple
Créer une ligne rouge en position 150. Position 150 est le point d'ancrage pour tout le texte défini dans l'exemple ci-dessous. Étudier l'effet de chaque valeur de la propriété textAlign:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create a red line in position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Show the different textAlign values
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); Essayez vous - même » Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
| Propriété | |||||
|---|---|---|---|---|---|
| textAlign | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Définition et utilisation
Les ensembles de propriétés textAlign ou retourne l'alignement actuel pour le contenu du texte, selon le point d'ancrage.
Normalement, le texte START dans la position spécifiée, cependant, si vous définissez textAlign = « right » et placer le texte en position 150, cela signifie que le texte devrait se terminer en position 150.
Tip: Utilisez le fillText() ou strokeText() méthode pour dessiner et positionner le texte sur la toile.
| Valeur par défaut: | début |
|---|---|
| syntaxe JavaScript: | context .textAlign="center|end|left|right|start"; |
Valeurs de propriété
| Valeurs | La description | Joue-le |
|---|---|---|
| début | Défaut. Le texte commence à la position spécifiée | Joue-le " |
| fin | Le texte se termine à la position spécifiée | Joue-le " |
| centre | Le centre du texte est placé à la position spécifiée | Joue-le " |
| la gauche | Le texte commence à la position spécifiée | Joue-le " |
| droite | Le texte se termine à la position spécifiée | Joue-le " |
<Canvas objet