Tegning av rektangler via canvas i JavaScript

Kvadrater og rektangler trenger du ikke nødvendigvis å tegne ved hjelp av kombinasjoner av moveTo, lineTo - det finnes enklere metoder for dette. La oss se på dem.

Metoden strokeRect

Metoden strokeRect(x, y, bredde, høyde) tegner omrisset av et rektangel på et gitt punkt. De to første parameterne angir koordinatene til punktet der øverste venstre hjørne av det tegnede rektangelet vil være.

La oss tegne et rektangel med strokeRect (antar at ctx allerede finnes):

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

Результат:

Metoden fillRect

Metoden fillRect(x, y, bredde, høyde) fungerer på samme måte som strokeRect, men tegner et fylt rektangel. La oss se på et eksempel:

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

Результат:

Metoden rect

Den neste metoden rect(x, y, bredde, høyde) tegner også et rektangel. Men dette rektangelet blir bare synlig hvis du bruker metoden stroke eller fill. I det første tilfellet blir det en omrisslinje, og i det andre - en fylt figur.

La oss tegne en omrisslinje med 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();

Результат:

Og nå tegner vi en fylt figur:

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

Результат:

Metoden clearRect

Den neste metoden clearRect(x, y, bredde, høyde) fungerer som et viskelær, og tørker et rektangulært område og gjør innholdet helt gjennomsiktig.

La oss tegne en liten firkant med fillRect og viske bort en del av den med 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);

Результат: