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

stroke()
stroke(path)

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.rect(100, 150, 150, 150);
 ctx.stroke();
 
 ctx.beginPath(); 

 ctx.lineWidth = 30;
 ctx.strokeStyle = "blue";
 ctx.moveTo(50, 50);
 ctx.lineTo(300, 25);
 ctx.stroke();

 ctx.lineWidth = 15;
 ctx.strokeStyle = "yellow";
 ctx.moveTo(10, 80);
 ctx.lineTo(220, 80);
 ctx.stroke();

 ctx.lineWidth = 5;
 ctx.strokeStyle = "orange";
 ctx.moveTo(30, 250);
 ctx.lineTo(300, 150);
 ctx.stroke(); 

 ctx.lineWidth = 25;
 ctx.strokeStyle = "green";

 ctx.beginPath();
 ctx.rect(200, 350, 125, 125);
 ctx.stroke();
 ctx.fill();

 ctx.beginPath();
 ctx.rect(25, 350, 125, 125);
 ctx.fill();
 ctx.stroke();

 return;

 };

</script>

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

Opis:
Metoda CanvasRenderingContext2D.stroke() obrysowuje bieżącą lub podaną ścieżkę za pomocą aktualny styl obrysu. Pociągnięcia są wyrównywane do środka ścieżki, jest to połowa skoku narysowane po wewnętrznej stronie, a połowa po stronie zewnętrznej. Pociągnięcie jest rysowane przy użyciu niezerowej reguły nawijania, która oznacza, że ​​skrzyżowania ścieżek będą nadal zapełniane. Parametry path Path2D. Wartość zwracana undefined.

Zobacz też:
Path2D -