Tekening van reghoeke via canvas op JavaScript
Vierkante en reghoeke hoef nie noodwendig
geteken te word met behulp van kombinasies van moveTo,
lineTo nie - daar is eenvoudiger metodes vir dit.
Kom ons kyk na hulle.
Metode strokeRect
Die metode strokeRect(x, y, breedte,
hoogte) teken die omlyn van 'n reghoek by die gegewe punt.
Die eerste twee parameters spesifiseer
die koördinate van die punt waar die boonste
linkerhoek van die getekende reghoek sal wees.
Kom ons teken 'n reghoek met behulp van
strokeRect (ons neem aan ctx
reeds bestaan):
<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);
:
Metode fillRect
Die metode fillRect(x, y, breedte, hoogte)
werk net soos strokeRect,
maar teken 'n gevulde reghoek.
Kom ons kyk na 'n voorbeeld:
<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);
:
Metode rect
Die volgende metode rect(x, y, breedte,
hoogte) teken ook 'n reghoek. Maar
hierdie reghoek sal net sigbaar word
as die metode stroke of fill toegepas word.
In die eerste geval sal dit 'n omlyn wees, en in die tweede
'n gevulde vorm.
Kom ons teken 'n omlyn met behulp van 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 nou teken ons 'n gevulde vorm:
<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();
:
Metode clearRect
Die volgende metode clearRect(x, y,
breedte, hoogte) werk soos 'n uitveër,
wat 'n reghoekige area skoonmaak en die
inhoud heeltemal deursigtig maak.
Kom ons teken 'n vierkant met behulp van fillRect
en vee 'n deel daarvan uit 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);
:
