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):

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.stroke();

Результат:

A teraz narysujmy wypełniony kształt:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);

Результат: