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 per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
| Proprietà | |||||
|---|---|---|---|---|---|
| textAlign | sì | 9.0 | sì | sì | sì |
Definizione e 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 avràinizio in posizione specificata, tuttavia, se si imposta textAlign = "destra" e inserire il testo in posizione 150, significa che il testo dovrebbe finire in posizione 150.
Suggerimento: Utilizzare il fillText() o il 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 |
|---|---|---|
| start | Predefinito. Il testo inizia dalla posizione specificata | Gioca " |
| end | Il testo termina alla posizione specificata | Gioca " |
| center | Il centro del testo viene posizionato nella posizione specificata | Gioca " |
| left | Il testo inizia dalla posizione specificata | Gioca " |
| right | Il testo termina alla posizione specificata | Gioca " |