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