Lijnen tekenen via canvas in JavaScript
Laten we beginnen met iets simpels - het tekenen van lijnen. Om te begrijpen hoe dit werkt, stel je voor dat je een vel papier en een potlood hebt. Je kan op dit vel tekenen, of zonder te tekenen gewoon het potlood naar het gewenste punt verplaatsen.
JavaScript werkt op dezelfde manier: het heeft
een potlood (of een pen om mee te tekenen), naar de gewenste
plek kun je het verplaatsen met behulp van
de methode moveTo, en tekenen - met behulp van
de methode lineTo.
Beide methoden accepteren als parameters een punt waarheen
de punt van de pen moet worden verplaatst - de eerste parameter
is de horizontale coördinaat,
en de tweede - de verticale.
De oorsprong van het coördinatenstelsel - punt 0,
0 - is de linkerbovenhoek van het element.
Wanneer de pen naar het gewenste punt wordt verplaatst -
verplaatst de methode moveTo alleen, terwijl
lineTo tijdens het verplaatsen een
lijn tekent van de huidige positie van de pen naar het punt
waar het naartoe wordt verplaatst.
Als je echter de bovenstaande code uitvoert
- gebeurt er niets: het is noodzakelijk om
nog twee commando's te schrijven: het eerste commando beginPath
moet worden gespecificeerd voordat met het tekenen van de
lijn wordt begonnen, en het tweede commando stroke moet
worden aangeroepen na alle combinaties van moveTo
en lineTo om de lijn daadwerkelijk te tekenen.
Laten we dus een werkende code schrijven om een lijn te tekenen:
Laten we een lijn tekenen
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Laten we een vogeltje tekenen
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
Laten we een driehoek tekenen
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
Laten we een vierkantje tekenen
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
Vormen sluiten
Voor het tekenen van een gesloten vorm is het niet noodzakelijk
om alle lijnen te maken - de laatste lijn kan
automatisch worden getekend en de vorm sluiten.
Hiervoor moet voor de methode stroke
de methode closePath worden aangeroepen.
Deze methode probeert de vorm te sluiten door een rechte lijn te tekenen van het eindpunt naar het beginpunt. Als de vorm al gesloten was of slechts een enkel punt is, dan doet de methode niets.
Laten we een driehoek tekenen met behulp van closePath:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - deze stap slaan we over
ctx.closePath();
ctx.stroke();
:
Vormen inkleuren
In plaats van de methode stroke kan men
de methode fill gebruiken - hierbij hoeft de vorm niet per se
volledig gesloten te zijn - ze zal toch worden ingekleurd:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - deze stap slaan we over
//ctx.closePath(); - en deze ook
ctx.fill();
:
