Esempio
Creare una linea rossa in posizione 150. posizione 150 è il punto di ancoraggio per tutto il testo definito nel seguente esempio. Studiare l'effetto di ogni valore di 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); Prova tu stesso " Supporto browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
| Proprietà | |||||
|---|---|---|---|---|---|
| textAlign | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definizione e l'utilizzo
I set di proprietà TextAlign o restituisce l'allineamento corrente per il contenuto del testo, a seconda del punto di ancoraggio.
Normalmente, il testo verrà START nella posizione specificata, tuttavia, se si imposta textAlign = "right" e inserire il testo in posizione 150, vuol dire che il testo dovrebbe finire in posizione 150.
Tip: Utilizzare la fillText() o lo strokeText() metodo per disegnare e posizionare il testo sulla tela in realtà.
| Valore di default: | inizio |
|---|---|
| sintassi JavaScript: | context .textAlign="center|end|left|right|start"; |
I valori delle proprietà
| Valori | Descrizione | Gioca |
|---|---|---|
| inizio | Predefinito. Il testo inizia alla posizione specificata | Gioca " |
| fine | Il testo termina nella posizione specificata | Gioca " |
| centro | Il centro del testo viene posizionato nella posizione specificata | Gioca " |
| sinistra | Il testo inizia alla posizione specificata | Gioca " |
| destra | Il testo termina nella posizione specificata | Gioca " |
<Oggetto Tela