Atrybut textBaseline Canvas

Podręcznik Canvas

Definicja i użycie

Atrybut textBaseline ustawia lub zwraca bieżącą linię bazową rysowania tekstu.

Poniższy obrazek pokazuje różne rodzaje bazowych linii wspierane przez atrybut textBaseline:

Ilustracja pozioma tekstu

Uwaga:fillText() lub strokeText() Metoda umieszczania tekstu na płótnie używa określonej wartości textBaseline.

Przykład

Zdefiniuj prostokąt wypełniony niebieskim kolorem:

Twoja przeglądarka nie obsługuje znacznika canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Narysuj niebieską linię w pozycji y=100
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Umieść każdy słówko z różnymi wartościami textBaseline na y=200
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);

Spróbuj sam

Gramatyka

kontekst.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

Wartość atrybutu

Wartość Opis
alphabetic Domyślnie. Bazowa linia tekstu jest zwykłą linią bazową liter.
top Bazowa linia tekstu jest górnym krawędziem ramki em.
hanging Bazowa linia tekstu jest wiszącą linią bazową.
middle Bazowa linia tekstu jest środkiem ramki em.
ideographic Bazowa linia tekstu jest znaczeniową linią bazową.
bottom Bazowa linia tekstu jest dolnym krawędziem ramki em.

Szczegóły techniczne

Domyślna wartość: alphabetic

Obsługa przeglądarek

Numer w tabeli wskazuje 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

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

Podręcznik Canvas