Kreslení obdélníků pomocí canvas v JavaScriptu

Čtverce a obdélníky nemusíme nutně kreslit pomocí kombinací moveTo, lineTo - pro to existují jednodušší metody. Pojďme si je projít.

Metoda strokeRect

Metoda strokeRect(x, y, šířka, výška) kreslí v zadaném bodě obrys obdélníku. První dva parametry určují souřadnice bodu, ve kterém se nachází levý horní roh nakresleného obdélníku.

Pojďme nakreslit obdélník pomocí strokeRect (předpokládáme, že ctx již máme):

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, šířka, výška) funguje stejně jako strokeRect, ale kreslí vyplněný obdélník. Podívejme se na příklad:

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

Další metoda rect(x, y, šířka, výška) také kreslí obdélník. Ale viditelným se tento obdélník stane pouze pokud použijeme metodu stroke nebo fill. V prvním případě to bude obrys a ve druhém - vyplněný tvar.

Pojďme nakreslit obrys 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 nyní nakresleme vyplněný tvar:

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

Další metoda clearRect(x, y, šířka, výška) funguje jako guma, vyčistí obdélníkovou oblast a učiní její obsah zcela průhledným.

Pojďme nakreslit čtvereček pomocí fillRect a část jej vymažeme 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);

Результат: