Proprietà HTML canvas textAlign
Esempio
Crea una linea rossa nella posizione 150. La posizione 150 è il punto di ancoraggio per tutto il testo definito nell'esempio seguente. Studia l'effetto di ogni valore della proprietà 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);
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
| Property | |||||
|---|---|---|---|---|---|
| textAlign | Yes | 9.0 | Yes | Yes | Yes |
Definizione e utilizzo
La proprietà textAlign imposta o restituisce l'allineamento corrente per il contenuto del testo, in base al punto di ancoraggio.
Normalmente il testo INIZIA nella posizione specificata, tuttavia, se si imposta textAlign="right" e si posiziona il testo nella posizione 150, significa che il testo dovrebbe ENDERE nella posizione 150.
Suggerimento: usa il metodo fillText() o strokeText() per disegnare e posizionare effettivamente il testo sulla tela.
| Valore di default: | inizio |
|---|---|
| sintassi JavaScript: | contesto .textAlign="centro|fine|sinistra|destra|inizio"; |
Valori di proprietà
| Values | Description | Play it |
|---|---|---|
| start | Default. The text starts at the specified position | |
| end | The text ends at the specified position | |
| center | The center of the text is placed at the specified position | |
| left | The text starts at the specified position | |
| right | The text ends at the specified position |
❮ Riferimento tela HTML