[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.fillText()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

fillText(text, x, y)
fillText(text, x, y, maxWidth)

Przykłady:

<script>

 window.onload = () => {

 const szer = 600;
 const wys = 600;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");
 
 ctx.font = "100px serif";
 ctx.fillStyle = "rgba(0,51,102,0.9)";
 ctx.fillText("Witaj świecie!", 10, 100);
 
 ctx.font = "100px serif";
 ctx.fillStyle = "rgba(0,51,102,0.9)";
 ctx.fillText("Witaj świecie!", 10, 300, 150);

 return;

 };

</script>

<canvas id="canvas" width="100" height="100"></canvas>

Opis:
Metoda CanvasRenderingContext2D.fillText() rysuje fillText() ciąg tekstowy o określonych współrzędnych, wypełniając znaki ciągu bieżącym fillStyle. Opcjonalny parametr pozwala określić maksymalną szerokość renderowanego tekstu, którą program użytkownika osiągnie poprzez zagęszczenie tekstu lub użycie mniejszego rozmiaru czcionki. Ta metoda rysuje bezpośrednio na płótnie bez modyfikowania bieżącej ścieżki, więc wszelkie kolejne wywołania fill()lub stroke() nie będą miały na nią wpływu. Tekst jest renderowany przy użyciu konfiguracji czcionki i układu tekstu określonej we właściwościach font, textAlign, textBaseline i direction. Aby narysować kontury znaków w ciągu, wywołaj strokeText() metodę kontekstu. Parametry text - ciąg tekstowy do renderowania w kontekście, tekst jest renderowany przy użyciu ustawień określonych przez font, textAlign, textBaseline, direction, x - współrzędna osi X punktu, w którym należy rozpocząć rysowanie tekstu, w pikselach, y - współrzędna osi Y linii bazowej, od której należy rozpocząć rysowanie tekstu, w pikselach, maxWidth  - opcjonalny, maksymalna liczba pikseli szerokości tekstu, jaki może zostać wyrenderowany, jeśli nie określono, nie ma ograniczenia szerokości tekstu. Jeśli jednak podana zostanie ta wartość, program użytkownika dostosuje kerning, wybierze czcionkę bardziej skondensowaną w poziomie, jeśli jest dostępna lub można ją wygenerować bez utraty jakości, lub zmniejszy rozmiar czcionki do mniejszego, aby dopasować ją do tekst o określonej szerokości.

Zobacz też:
fill() -
stroke() -
strokeText() -
font -
textAlign -
textBaselinei -
direction -