Rysowanie prostokątów za pomocą canvas w JavaScript
Kwadratów i prostokątów niekoniecznie trzeba
rysować za pomocą kombinacji moveTo,
lineTo - istnieją do tego prostsze metody.
Przyjrzyjmy się im.
Metoda strokeRect
Metoda strokeRect(x, y, szerokość,
wysokość) rysuje w określonym punkcie kontur
prostokąta. Pierwsze dwa parametry określają
współrzędne punktu, w którym znajdzie się górny
lewy róg narysowanego prostokąta.
Narysujmy prostokąt za pomocą
strokeRect (zakładamy, że ctx
już istnieje):
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.strokeRect(50, 50, 100, 75);
:
Metoda fillRect
Metoda fillRect(x, y, szerokość, wysokość)
działa tak samo jak strokeRect,
tylko rysuje wypełniony prostokąt.
Spójrzmy na przykład:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 75);
:
Metoda rect
Następna metoda rect(x, y, szerokość,
wysokość) również rysuje prostokąt. Ale
prostokąt ten stanie się widoczny dopiero
po zastosowaniu metody stroke lub fill.
W pierwszym przypadku będzie to kontur, a w drugim
- wypełniony kształt.
Narysujmy kontur za pomocą rect:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.stroke();
:
A teraz narysujmy wypełniony kształt:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.fill();
:
Metoda clearRect
Następna metoda clearRect(x, y,
szerokość, wysokość) działa jak gumka,
czyszcząc prostokątny obszar i czyniąc
jego zawartość całkowicie przezroczystą.
Narysujmy kwadracik za pomocą fillRect
i zetrzyjmy jego część za pomocą clearRect:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);
:
