Propriété textAlign du Canvas
Exemple
Créez une ligne rouge à la position 150. Cette position est le point d'ancrage pour tout le texte défini dans l'exemple ci-dessous. Étudiez l'effet de chaque valeur de la propriété textAlign :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Créez une ligne rouge à la position 150
ctx.strokeStyle = "red";
ctx.moveTo(150, 20);
ctx.lineTo(150, 170);
ctx.stroke();
ctx.font = "15px Arial";
// Affichez les 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); Description
La propriété textAlign définit ou renvoie l'alignement actuel du contenu textuel, selon le point d'ancrage.
La valeur par défaut est start .
Voir aussi :
La propriété font (Définir la police et la taille du texte)
La propriété fillStyle (Définir la couleur/gradient du texte)
La propriété textBaseline (Définir la ligne de base du texte)
La méthode fillText() (Dessiner le texte)
La méthode strokeText() (Dessiner le texte)
Syntaxe
| context .textAlign = "center|end|left|right|start" |
Valeurs de propriété
| Valeurs | Description | Jouez-le |
|---|---|---|
| start | La position de début du texte | |
| end | La position de fin du texte | |
| center | La position centrale du texte | |
| left | La position de début du texte | |
| right | La position de fin du texte |
Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
textAlign est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |