Proprietà textAlign del canvas
Definizione e uso
textAlign Le proprietà in base al punto di ancoraggio, impostano o restituiscono il modo di allineamento corrente del contenuto del testo.
Di solito, il testo inizia dalla posizione specificata, ma se imposti textAlign="right" e posizioni il testo alla posizione 150, il testo finirà alla posizione 150.
Suggerimento:usando fillText() o strokeText() Il metodo disegna effettivamente il testo e lo posiziona sullo schermo.
Esempio
Crea una linea rossa alla posizione 150. La posizione 150 è il punto di ancoraggio per tutti i testi definiti negli esempi sottostanti. Studia l'effetto di ciascun valore di textAlign:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Crea una linea blu alla posizione 150
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Visualizza diversi valori di 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);
Sintassi
context.textAlign="center|end|left|right|start";
Valore dell'attributo
| Valore | Descrizione |
|---|---|
| start | Predefinito. Il testo inizia all'indirizzo specificato. |
| fine | Il testo termina all'indirizzo specificato. |
| centro | Il centro del testo viene posizionato all'indirizzo specificato. |
| sinistra | Allineamento a sinistra del testo. |
| destra | Allineamento a destra del testo. |
Dettagli tecnici
| Valore predefinito： | start |
|---|
Supporto dei browser
I numeri nella tabella indicano la versione del browser che supporta per la prima volta l'attributo.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.
