Stronę tą wyświetlono już: 3069 razy
Po canvas-ie w JavaScript można również rysować tekst za pomocą dwóch metod: fillText oraz strokeText.
var canvas = document.getElementById("drawingText");
var ctx = canvas.getContext("2d");
ctx.font = "30px arial";
ctx.fillText("some text", 10, 30); // metoda przyjmuje jako argumenty: tekst do wypełnienia, x, y [i opcjonalnie maksymalną długość tekstu]
ctx.strokeStyle = "red";
ctx.strokeText("some text", 10, 30); // podobnie co fillText
Rezultat działania powyższego skryptu
Dostępne są następujące pola obiektu kontekstu urządzenia, które umożliwiają sterowanie wyglądem tekstu:
- font - opisuje rozmiar czcionki i krój czcionki używanej do rysowania tekstu (sposób ustawienia jak w CSS, czyli dla przykładu:
ctx.font = "10px Arial";
- textAlign - przyjmuje następujące wartości:
- "left" - wyrównanie do lewej;
- "center" - wyrównanie do środka;
- "right" - wyrównanie do prawej;
- "start" - tekst jest wyrównywany do początku tekstu (do lewej gdy tekst jest wypisywany od lewej do prawej i do prawej, gdy tekst jest wypisywany od prawej do lewej;
- "end" - tekst jest wyrównywany do końca tekstu (do prawej gdy tekst jest wypisywany od lewej do prawej i do lewej, gdy tekst jest wypisywany od prawej do lewej;
- textBaseline - określa położenie punktu zaczepienia tekstu w poziomie, dostępne są następujące ustawienia:
- "top" - punkt zaczepienia na samej górze tekstu;
- "hanging" - punkt zaczepienia na samej górze ale małych liter tekstu;
- "middle" - punkt zaczepienia w połowie wysokości tekstu;
- "alphabetic" - punkt zaczepienia znajduje się na wysokości dolnej krawędzi liter pozbawionych ogonków;
- "ideographics" - punkt zaczepienia znajduje się na dole liter pozbawionych ogonków;
- "bottom" - punkt zaczepienia zawsze na dole całkowitej wysokości tekstu.