Atrybut textAlign dla Canvas

Podręcznik Canvas

Definicja i użycie

textAlign Atrybut według punktu kotwienia ustawia lub zwraca bieżący sposób wyrównania treści 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 rzeczywiście tekst na płótnie i umieszcza go.

Przykład

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

Twoja przeglądarka nie obsługuje znacznika 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świetlenie 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 jest umieszczony w określonej pozycji.
left Tekst wyśrodkowany do lewej.
right Tekst wyśrodkowany do prawej.

Szczegóły techniczne

Domyślna wartość: start

Wspierane przeglądarki

Liczby w tabeli wskazują 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ługuje elementu <canvas>.

Podręcznik Canvas