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

CanvasRenderingContext2D.stroke()

[_] [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]

strokeText(text, x, y)
strokeText(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.shadowColor = "red";
 ctx.shadowBlur = 10;
 ctx.lineJoin = "bevel";
 ctx.lineWidth = 2;
 ctx.fillStyle = "yellow";
 
 ctx.fillText("Witaj świecie!", 10, 100);
 ctx.strokeText("Witaj świecie!", 10, 100);
 
 ctx.font = "100px serif";
 
 ctx.shadowColor = "green";
 ctx.shadowBlur = 10;
 ctx.lineJoin = "bevel";
 ctx.lineWidth = 2;

 ctx.strokeText("Witaj świecie!", 10, 300, 150);


 return;

 };

</script>

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

Opis:
Metoda CanvasRenderingContext2D.strokeText() rysuje kontury — znaków ciągu tekstowego w określonym miejscu współrzędne. Opcjonalny parametr pozwala określić maksymalną szerokość renderowanego materiału tekst. Ta metoda rysuje bezpośrednio na płótnie bez modyfikowania bieżącej ścieżki, a więc dowolnej kolejny fill() lub stroke() wywołania nie będą miały żadnego efektu na tym. Użyj metody fillText(), aby wypełnij znaki tekstowe, zamiast rysować tylko ich kontury. Parametry text - ciąg do renderowania w kontekście. Tekst jest renderowany przy użyciu ustawień określonych przez font, textAlign, textBaseline oraz direction, x - współrzędna osi X punktu, w którym należy rozpocząć rysowanie tekstu, y - współrzędna osi Y punktu, w którym należy rozpocząć rysowanie tekstu, maxWidth - opcjonalny, maksymalna szerokość tekstu, jaki może zostać wyrenderowany. Jeśli nie określono, nie ma limitu do szerokości tekstu. Jeśli jednak zostanie podana ta wartość, wybierz czcionkę bardziej skondensowaną poziomo jeśli jest dostępna lub można wygenerować bez utraty jakości lub zmniejszyć rozmiar czcionki do mniejszego aby dopasować tekst do określonej szerokości. Wartość zwracana undefined.

Zobacz też:
fill() -
fillText() -
stroke() -