Attributo textAlign del canvas HTML
Definizione e uso
textAlign L'attributo imposta o restituisce il modo di allineamento corrente del contenuto del testo in base all'ancora.
Di solito, il testo inizia dal punto specificato, ma se imposti textAlign="right" e posizioni il testo alla posizione 150, allora finirà alla posizione 150.
Suggerimento:usando fillText() o strokeText() Il metodo disegna effettivamente il testo sulla superficie e lo posiziona.
Esempio
Crea una linea rossa in posizione 150. La posizione 150 è il punto di ancoraggio per tutti i testi definiti negli esempi seguenti. Studia l'effetto di ogni valore di textAlign:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 在位置 150 创建蓝线
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// 显示不同的 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 alla posizione specificata. |
| end | Il testo termina alla posizione specificata. |
| center | Il centro del testo viene posizionato alla posizione specificata. |
| left | Allineamento a sinistra del testo. |
| right | Allineamento a destra del testo. |
Dettagli tecnici
| Valore predefinito: | start |
|---|
Supporto del 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>.
