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):

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, širina, višina) deluje enako kot strokeRect, vendar riše zapolnjen pravokotnik. Poglejmo primer:

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

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:

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();

Результат:

In sedaj narišimo zapolnjeno obliko:

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

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:

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);

Результат: