Rysowanie tekstu na kanwie (canvas HTML5)

W rozdziale:

Tekst

IE	Firefox	Safari	Chrome	Opera	iPhone	Android
7.0+^*	3.0+^†	3.0+	3.0+	10.0+	1.0+	1.0+
* Internet Explorer 7 i 8 wymagają dodatku zewnętrznej biblioteki explorercanvas. Internet Explorer 9 standardowo obsługuje tekst na kanwie.
† Mozilla Firefox 3.0 wymaga dodatku.

Oprócz linii na kanwie można też rysować tekst. W odróżnieniu od strony internetowej zawierającej kanwę, na kanwie nie ma czegoś takiego, jak model polowy. To znaczy, że nie można używać żadnej z technik CSS komponowania układów elementów: nie ma elementów pływających, marginesów, dopełnienia ani własności zawijania tekstu. (Może niektórzy pomyślą, że to bardzo dobrze!) Na kanwie ustawia się kilka własności czcionki, a następnie określa punkt, w którym ma zostać narysowany tekst.

W kontekście rysunku dostępne są następujące atrybuty czcionki:

font: pozwala ustawić wszystko to, co można zdefiniować przy użyciu własności CSS font. Można ustawić styl pisma, wariant czcionki, grubość tekstu, rozmiar czcionki, wysokość linii oraz rodzinę czcionek.
textAlign: służy do określania wyrównania tekstu. Ma podobne działanie do własności CSS text-align. Dostępne wartości to start, end, left, right oraz center.
textBaseline: umożliwia określanie miejsca rysowania tekstu w odniesieniu do punktu początkowego. Dostępne wartości to top, hanging, middle, alphabetic, ideographic oraz bottom.

Własność textBaseline jest problematyczna, ponieważ tekst sam w sobie sprawia trudności (zwykle litery łacińskie nie, ale na kanwie można narysować każdy znak Unicode, a Unicode jest skomplikowany). W specyfikacji HTML5 znajduje się objaśnienie różnych linii bazowych pisma:

Górna krawędź prostokąta em mniej więcej pokrywa się z górną krawędzią glifów fontu. Linia bazowa biegnie u nasady niektórych glifów, jak np. à¤†. Linia środkowa znajduje się pośrodku między górną a dolną krawędzią prostokąta em. Alfabetyczna linia bazowa biegnie u nasady takich znaków, jak Ã, Ã¿, f oraz Î©. Ideograficzna linia bazowa biegnie u podstawy takich glifów, jak ç§ i é”. Natomiast linia dolna prostokąta em pokrywa się z grubsza z dolną końcówką glifów fontu. Górna i dolna krawędź otaczającego pola mogą znajdować się daleko od tych linii bazowych ze względu na to, że niektóre glify mogą wychodzić daleko poza prostokąt em.

W przypadku prostych alfabetów, jak języka polskiego można bezpiecznie używać tylko ustawień top, middle oraz bottom.

Narysujmy jakiś tekst! Tekst rysowany na kanwie dziedziczy ustawienia rozmiaru i stylu po elemencie <canvas>, ale można je zmienić za pomocą własności font kontekstu rysunkowego.

Zmiana stylu pisma

context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);
context.fillText("y", 58, 165);

Metoda fillText() rysuje tekst.

context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);
context.fillText("y", 58, 165);

Pytanie do profesora Kodeckiego

P: Czy można ustawiać rozmiar tekstu na kanwie przy użyciu jednostek względnych?
O: Tak. Podobnie jak wszystkie inne elementy na stronie HTML, element <canvas> ma rozmiar pisma obliczony na podstawie reguł CSS zastosowanych do tej strony. Jeśli własność context.font zostanie ustawiona na wartość względną typu 1.5em albo 150%, przeglądarka pomnoży tę wartość przez obliczony rozmiar pisma elementu <canvas>.

Jeśli chodzi o tekst znajdujący się w lewym górnym rogu, to powiedzmy, że chcemy, aby jego górna krawędź znajdowała się w punkcie y=5. Ale ja jestem leniwy i nie chce mi się mierzyć wysokości tekstu, aby obliczyć jego linię bazową. Zamiast to robić mogę ustawić własność textBaseline na top i przekazać współrzędną lewego górnego rogu pola zawierającego tekst.

context.textBaseline = "top";
context.fillText("( 0 , 0 )", 8, 5);

Teraz zajmiemy się tekstem w prawym dolnym rogu. Powiedzmy, że chcemy, aby dolny prawy róg tekstu znajdował się w punkcie o współrzędnych (492,370) — tylko kilka pikseli od prawego dolnego rogu kanwy — ale nie chcemy mierzyć szerokości ani wysokości tekstu. Możemy ustawić własność textAlign na right i textBaseline na bottom, a następnie wywołać metodę fillText() ze współrzędnymi prawego dolnego rogu pola zawierającego tekstu.

context.textAlign = "right";
context.textBaseline = "bottom";
context.fillText("( 500 , 375 )", 492, 370);

Otrzymujemy taki wynik:

Ups! Zapomniałem o kropkach w rogach. Rysowaniem kół zajmiemy się później. Teraz trochę pooszukujemy i narysujemy prostokąty.

context.fillRect(0, 0, 3, 3);
context.fillRect(497, 372, 3, 3);

To wszystko! Oto finalny efekt naszej pracy:

Semantyka HTML5 Kurs HTML5 Wideo na stronie