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

CanvasRenderingContext2D.fillRect()

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

fillRect(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.fillStyle = "orange";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 
 ctx.fillStyle = "blue";
 ctx.fillRect(12, 12, 250, 250);

 ctx.fillStyle = "yellow";
 ctx.fillRect(200, 99, 150, 30);

 return;

 };

</script>

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

Opis:
Metoda CanvasRenderingContext2D.fillRect() rysuje prostokąt wypełniany zgodnie z bieżącym plikiem fillStyle. 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. Metoda fillRect() rysuje wypełniony prostokąt, którego punkt początkowy znajduje się w (x, y) i którego rozmiar jest określony przez width i height. Styl wypełnienia jest określony przez bieżący fillStyle atrybut. Parametry x - współrzędna osi x punktu początkowego prostokąta, y - współrzędna osi Y punktu, width - szerokość prostokąta, wartości dodatnie znajdują się po prawej stronie, a ujemne po lewej stronie.początkowego prostokąta, height - wysokość prostokąta, wartości dodatnie spadają, a ujemne rosną.

Zobacz też: