Rysowanie tekstu przy użyciu canvas

Element <canvas> wspiera obsługę rysowania tekstu przez eksperymentalne API stworzone w Mozilli.

Method overview

Atrybuty

ctx.mozTextStyle = "20pt Arial";

Metody

mozDrawText()

Rysuje podany tekst używając stylu tekstu podanego w atrybucie mozTextStyle. Kolor wypełnienia kontekstu zostanie użyty jako kolor tekstu.

void mozDrawText(
   in DOMString textToDraw
);

Parametry

<tt>textToDraw</tt>

Tekst rysowany w tym kontekście.

Przykład

ctx.translate(10, 50);
ctx.fillStyle = "Red";
ctx.mozDrawText("Przykładowy ciąg");

Ten kod rysuje tekst "Przykładowy ciąg" na czerwono w pozycji (10,50) elementu canvas.

mozMeasureText()

Zwraca szerokość, w pikselach, jaką podany tekst zajmie kiedy zostanie narysowany w aktualnie użytym stylu.

float mozMeasureText(
  in DOMString textToMeasure
);

Parametery

<tt>textToMeasure</tt>

Ciąg, którego szerokośc w pikselach chcemy ustalić.

Zwracana wartość

Szerokość tekstu w pikselach.

Przykład

var text = "Przykładowy ciąg";
var width = ctx.canvas.width;
var len = ctx.mozMeasureText(text);
ctx.translate((width - len)/2, 0);
ctx.mozDrawText(text);

Ten przykład określa szerokość ciągu, a następnie korzstając z tych danych ryskuje go na horyzontalnym środku w elemencie canvas.

mozPathText()

Dodaje kontury tekstu do aktualnej ścieżki. Pozwala to na obrysowanie tekstu zamiast wypełniania go.

void mozPathText(
  in DOMString textToPath
);

Parametery

<tt>textToPath</tt>

Tekst, którego kontury mają zostać dodane do aktualnej ścieżki.

Example

ctx.fillStyle = "green";
ctx.strokeStyle = "black";
ctx.mozPathText("Przykładowy ciąg");
ctx.fill()
ctx.stroke()

Ten kod narysuje tekst "Przykładowy ciąg" na zielono z czarną obwódką przez dodanie konturów tekstu do ścieżki, a następnie wypełniając ścieżkę i nakładając kontur.

mozTextAlongPath()

Dodaje (lub rysuje) określony tekst wzdłuż podanej ścieżki.

void mozTextAlongPath(
  in DOMString textToDraw,
  in boolean stroke
);

Parametery

<tt>textToDraw</tt>

Tekst, który ma zostać narysowany wzdłuż podanej ścieżki.

<tt>stroke</tt>

Jeśli ten parametr ma wartość true, wówczas tekst będzie rysowany wzdłuż podanej ścieżki. Jeśli ma wartość false, tekst zostanie zamiast tego dodany do ścieżki, na końcu.

Uwagi

Glify nie są skalowane ani transformowane zgodnie z krzywymi ścieżki; zamiast tego, każdy glif jest renderowany traktując ścieżkę pod sobą jako prostą linię. Można to wykorzystać do stworzenia unikatowych efektów.

Notatki

• Te rozszerzenia nie są jeszcze ustandardyzowane przez WHATWG.
• Nie potrzebujesz specjalnego kontekstu, aby tego używać; kontekst 2D wystarczy.
• Wszelkie rysowanie odbywa się przy użyciu aktualnej transformacji.
• Aby dowiedzieć się więcej o detalach implementacji zajrzyj do błąd 339553.

Dodatkowe przykłady

• Rysowanie tekstu konturem wokół ścieżki
• Rysowanie wzdłuż ścieżki
• Animowanie ruchu tekstu wokół kółka.