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

strokeRect(x, y, width, height)

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.shadowColor = "red";
 ctx.shadowBlur = 10;
 ctx.lineJoin = "bevel";
 ctx.lineWidth = 25;
 
 ctx.strokeStyle = "blue";

 ctx.strokeRect(100, 200, 150, 150);

 ctx.strokeStyle = "orange";

 ctx.strokeRect(200, 30, 125, 125);
 ctx.strokeRect(25, 30, 125, 125);


 return;

 };

</script>

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

Opis:
Metoda CanvasRenderingContext2D.strokeRect() rysuje prostokąt, który jest obrysowywany zgodnie z bieżący strokeStyle i inne ustawienia kontekstu. Ta metoda rysuje bezpośrednio na płótnie bez modyfikowania bieżącej ścieżki, a więc kolejny fill() lub stroke() nie będą miały żadnego efektu na tym. Metoda strokeRect() rysuje obrysowany prostokąt, którego punktem początkowym jest x, y i którego rozmiar jest określony przez width i height. Parametry x - współrzędna osi x punktu początkowego prostokąta, y - współrzędna osi Y punktu początkowego prostokąta, width - szerokość prostokąta. Wartości dodatnie znajdują się po prawej stronie, a ujemne po lewej stronie, height - wysokość prostokąta. Wartości dodatnie spadają, a ujemne rosną. Wartość zwracana undefined.

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