Kreslenie obdĺžnikov pomocou canvas v JavaScripte
Štvorce a obdĺžniky nie je nevyhnutné
kresliť pomocou kombinácií moveTo,
lineTo - na to existujú jednoduchšie metódy.
Poďme si ich prejsť.
Metóda strokeRect
Metóda strokeRect(x, y, šírka,
výška) kreslí v zadanom bode obrys
obdĺžnika. Prvé dva parametre určujú
súradnice bodu, v ktorom sa nachádza ľavý
horný roh nakresleného obdĺžnika.
Poďme nakresliť obdĺžnik pomocou
strokeRect (predpokladáme, že ctx
už existuje):
<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);
:
Metóda fillRect
Metóda fillRect(x, y, šírka, výška)
funguje rovnako ako strokeRect,
len kreslí vyplnený obdĺžnik.
Pozrime sa na prí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);
:
Metóda rect
Ďalšia metóda rect(x, y, šírka,
výška) tiež kreslí obdĺžnik. Ale
viditeľný tento obdĺžnik sa stane, iba
ak aplikujeme metódu stroke alebo fill.
V prvom prípade to bude obrys, a v druhom
- vyplnený tvar.
Poďme nakresliť obrys pomocou 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 nakreslíme vyplnený 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();
:
Metóda clearRect
Ďalšia metóda clearRect(x, y,
šírka, výška) funguje ako guma,
čistí obdĺžnikovú oblasť a robí
jej obsah úplne priehľadným.
Poďme nakresliť štvorček pomocou fillRect
a zotrieme jeho časť pomocou 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);
:
