Exemple
Créer une ligne rouge en position 150. Position 150 est le point de tout le texte défini dans l'exemple ci-dessous d'ancrage. Étude de 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 - le 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 | Oui | 9.0 | Oui | Oui | Oui |
Définition et utilisation
Les ensembles de propriétés textAlign ou retourne l'alignement en cours pour le contenu du texte, selon le point d'ancrage.
Normalement, le texte vacommencer 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.
Astuce: Utilisez le fillText() ou strokeText() méthode réellement dessiner et positionner le texte sur la toile.
| Valeur par défaut: | Démarrer |
|---|---|
| Syntaxe JavaScript: | context.textAlign="center|end|left|right|start"; |
propriété valeurs
| Valeurs | La description | Joue-le |
|---|---|---|
| start | Défaut. Le texte commence à la position spécifiée | Joue-le " |
| end | Le texte se termine à la position spécifiée | Joue-le " |
| center | Le centre du texte est placé à la position spécifiée | Joue-le " |
| left | Le texte commence à la position spécifiée | Joue-le " |
| right | Le texte se termine à la position spécifiée | Joue-le " |