Canvas - rysowanie tekstu w JavaScript

Stronę tą wyświetlono już: 132 razy

Po canvas-ie w JavaScript można również rysować tekst za pomocą dwóch metod: fillText oraz strokeText.

Listing 1
  1. var canvas = document.getElementById("drawingText");
  2. var ctx = canvas.getContext("2d");
  3. ctx.font = "30px arial";
  4. ctx.fillText("some text", 10, 30); // metoda przyjmuje jako argumenty: tekst do wypełnienia, x, y [i opcjonalnie maksymalną długość tekstu]
  5. ctx.strokeStyle = "red";
  6. 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:
    Listing 2
    1. 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.

Komentarze