Crtanje pravougaonika preko canvas-a u JavaScript-u
Kvadrati i pravougaonici se ne moraju nužno
crtati pomoću kombinacija moveTo,
lineTo - za to postoje jednostavnije metode.
Hajde da ih razmotrimo.
Metoda strokeRect
Metoda strokeRect(x, y, širina,
visina) crta konturu pravougaonika na
datim koordinatama. Prva dva parametra određuju
koordinate tačke u kojoj će se naći gornji
levi ugao nacrtanog pravougaonika.
Hajde da nacrtamo pravougaonik pomoću
strokeRect (pretpostavljamo da ctx
već postoji):
<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, širina, visina)
radi na isti način kao i strokeRect,
samo što crta popunjeni pravougaonik.
Pogledajmo primer:
<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
Sledeća metoda rect(x, y, širina,
visina) takođe crta pravougaonik. Ali
ovaj pravougaonik će postati vidljiv tek
kada se primeni metoda stroke ili fill.
U prvom slučaju će biti kontura, a u drugom
- popunjena figura.
Hajde da nacrtamo konturu pomoću 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 sada hajde da nacrtamo popunjenu figuru:
<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
Sledeća metoda clearRect(x, y,
širina, visina) radi kao gumica,
čisti pravougaonu oblast i čini
njen sadržaj potpuno providnim.
Hajde da nacrtamo kvadratić pomoću fillRect
i da obrišemo njegov deo pomoću 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);
:
