Rechthoeken tekenen via canvas op JavaScript

Vierkanten en rechthoeken hoeven niet per se getekend te worden met combinaties van moveTo, lineTo - daar zijn eenvoudigere methoden voor. Laten we deze bekijken.

De strokeRect methode

De methode strokeRect(x, y, breedte, hoogte) tekent de omtrek van een rechthoek op een bepaald punt. De eerste twee parameters geven de coördinaten van het punt aan waar de linkerbovenhoek van de getekende rechthoek zich zal bevinden.

Laten we een rechthoek tekenen met strokeRect (we nemen aan dat ctx al bestaat):

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

Результат:

De fillRect methode

De methode fillRect(x, y, breedte, hoogte) werkt hetzelfde als strokeRect, maar tekent een ingevulde rechthoek. Laten we een voorbeeld bekijken:

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

Результат:

De rect methode

De volgende methode rect(x, y, breedte, hoogte) tekent ook een rechthoek. Maar deze rechthoek wordt alleen zichtbaar als de methode stroke of fill wordt toegepast. In het eerste geval wordt het een omtrek, en in het tweede geval een ingevulde vorm.

Laten we een omtrek tekenen met 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();

Результат:

En laten we nu een ingevulde vorm tekenen:

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

Результат:

De clearRect methode

De volgende methode clearRect(x, y, breedte, hoogte) werkt als een gum, die een rechthoekig gebied wist en de inhoud volledig transparant maakt.

Laten we een vierkantje tekenen met fillRect en een deel ervan wissen met 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);

Результат: