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):
<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);
:
De fillRect methode
De methode fillRect(x, y, breedte, hoogte)
werkt hetzelfde als strokeRect,
maar tekent een ingevulde rechthoek.
Laten we een voorbeeld bekijken:
<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);
:
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:
<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();
:
En laten we nu een ingevulde vorm tekenen:
<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();
:
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:
<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);
:
