Canvas - rysowanie tekstu w JavaScript

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 2904 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: