Risanje pravokotnikov prek canvas v JavaScriptu
Kvadratov in pravokotnikov ni nujno
risati s kombinacijami moveTo,
lineTo - za to obstajajo enostavnejše metode.
Oglejmo si jih.
Metoda strokeRect
Metoda strokeRect(x, y, širina,
višina) riše obris pravokotnika na dani točki.
Prva dva parametra določata
koordinate točke, kjer bo zgornji
levi kot narisanega pravokotnika.
Narišimo pravokotnik z
strokeRect (predpostavimo, da ctx
že obstaja):
<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, višina)
deluje enako kot strokeRect,
vendar riše zapolnjen pravokotnik.
Poglejmo 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
Naslednja metoda rect(x, y, širina,
višina) prav tako riše pravokotnik. Vendar
postane ta pravokotnik viden šele,
ko uporabimo metodo stroke ali fill.
V prvem primeru bo to obris, v drugem
- zapolnjena oblika.
Narišimo obris z 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();
:
In sedaj narišimo zapolnjeno obliko:
<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
Naslednja metoda clearRect(x, y,
širina, višina) deluje kot radirka,
ki očisti pravokotno območje in naredi
vsebino popolnoma prozorno.
Narišimo kvadrat s fillRect
in izbrišimo njegov del s 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);
:
