Atrybut textAlign w HTML canvas

Podręcznik HTML5 Canvas

Definicja i użycie

textAlign Atrybut ustawia lub zwraca bieżącą wartość wyównego wyważenia tekstu.

Zwykle tekst zaczyna się od określonej pozycji, ale jeśli ustawisz textAlign="right" i umieścisz tekst w pozycji 150, tekst zakończy się w pozycji 150.

Wskazówka:z użyciem fillText() lub strokeText() Metoda rysuje i umieszcza tekst na płótnie.

Przykład

Tworzenie czerwonej linii w pozycji 150. Pozycja 150 jest punktem odniesienia dla wszystkich tekstów zdefiniowanych w poniższym przykładzie. Zbadaj efekt różnych wartości textAlign:

Twoja przeglądarka nie obsługuje tagu canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Tworzenie niebieskiej linii w pozycji 150
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Wyświetlanie różnych wartości 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);

Spróbuj sam

Gramatyka

kontekst.textAlign="center|end|left|right|start";

Wartość atrybutu

Wartość Opis
start Domyślnie. Tekst zaczyna się w określonej pozycji.
end Tekst kończy się w określonej pozycji.
center Środek tekstu umieszczony w określonej pozycji.
left Tekst lewostronnie wyjustowany.
right Tekst prawostronnie wyjustowany.

Szczegóły techniczne

Domyślna wartość: start

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Komentarz:Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.

Podręcznik HTML5 Canvas