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

CanvasRenderingContext2D.rect()

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

rect(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.beginPath();
 ctx.rect(25, 25, 200, 200);
 ctx.rect(190, 190, 50, 50);
 ctx.fillStyle = "green";
 ctx.fill("evenodd");

 return;

 };

</script>

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

Opis:
Metoda CanvasRenderingContext2D.rect() dodaje prostokąt do bieżącej ścieżki. Podobnie jak inne metody modyfikujące bieżącą ścieżkę, ta metoda nie renderuje niczego bezpośrednio. Aby narysować prostokąt na płótnie, możesz użyć metod fill() lub stroke(). Aby utworzyć i wyrenderować prostokąt w jednym kroku, użyj metod fillRect() lub strokeRect(). Metoda rect() tworzy prostokątną ścieżkę, której punkt początkowy znajduje się w 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() -
fillRect() - 
stroke() - 
strokeRect() -