Manuale di riferimento HTML

Completo elenco dei tag HTML

Proprietà textAlign canvas HTML

textAlign è un attributo che descrive il modo in cui il testo viene allineato durante il disegno con l'API Canvas 2D. Attenzione, l'allineamento è basato sul valore x del metodo fillText di CanvasRenderingContext2D. Quindi, se textAlign="center", il testo verrà disegnato a x-50%*larghezza.

Manuale di riferimento per HTML canvas

Esempio online

Crea una linea rossa in posizione 150. La posizione 150 è il punto di posizionamento definito per tutti i testi nell'esempio seguente. Studia l'effetto di ogni valore dell'attributo textAlign:

Esempio

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilizzo dell'attributo textAlign di HTML canvas - Guida di base (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag canvas HTML5.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Crea una linea rossa in posizione 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";　　　　
// Indica 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);
</script>
</body>
</html>

Testa e guarda ‹/›

Compatibilità del browser

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari support textAlign attributi.

Attenzione:Internet Explorer 8 e le versioni precedenti non supportano l'elemento <canvas>.

Definizione e uso

In base al punto di posizionamento, l'attributo textAlign imposta o restituisce il modo di allineamento attuale del contenuto del testo.

Di solito, il testo inizia nella posizione specificata, ma se impostare textAlign =“ right” e posizionare il testo alla posizione 150, significa che il testo dovrebbe finire alla posizione 150.

Suggerimento:Utilizzare fillText() ostrokeText() Il metodo disegna e posiziona effettivamente il testo sullo schermo.

valore predefinito:	inizio
Sintassi JavaScript:	context.textAlign="center\|end\|left\|right\|inizio";

valore dell'attributo

valore	descrizione
inizio	predefinito. Il testo inizia nella posizione specificata.
fine	Il testo termina nella posizione specificata.
centro	Il centro del testo viene posizionato nella posizione specificata.
sinistra	Il testo inizia nella posizione specificata.
destra	Il testo termina nella posizione specificata.

Manuale di riferimento per HTML canvas

HTML: <template> etichetta