Tegning af linjer via canvas i JavaScript
Lad os starte enkelt - med at tegne linjer. For at forstå, hvordan det gøres, forestil dig, at du har et stykke papir og en blyant. Du kan tegne på dette stykke papir, eller du kan uden at tegne blot flytte blyanten til det ønskede punkt.
JavaScript fungerer på samme måde: den har en
blyant (eller en pen til tegning), til det ønskede
sted kan du flytte den ved hjælp af
metoden moveTo, og tegne - ved hjælp af
metoden lineTo.
Begge metoder tager som parametre et punkt, som
pen-spidsen skal flyttes til - første parameter
er koordinaten vandret, og den anden - lodret.
Koordinatoprindelsen - punktet 0,
0 - er elementets øverste venstre hjørne.
Når pennen flyttes til det ønskede punkt -
flytter metoden moveTo blot, mens
lineTo under flytningen tegner en
linje fra pennens nuværende position til punktet,
som den flyttes til.
Men hvis man kører koden ovenfor
- vil der ikke ske noget: det er nødvendigt at skrive
yderligere to kommandoer: den første kommando beginPath
skal angives før starten af linjetegningen,
og den anden kommando stroke skal
kaldes efter alle kombinationer af moveTo
og lineTo for at linjen bliver tegnet.
Så lad os skrive arbejdende kode til at tegne en linje:
Lad os tegne en linje
<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();
:
Lad os tegne et fugleudseende
<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();
:
Lad os tegne en trekant
<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();
:
Lad os tegne en firkant
<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();
:
Lukning af figurer
For at tegne en lukket figur er det ikke nødvendigt
at lave alle linjer - den sidste linje kan
tegnes automatisk og lukke figuren.
For at gøre dette, skal metoden closePath
kaldes før metoden stroke.
Denne metode forsøger at lukke figuren ved at tegne en lige linje fra slutpunktet til startpunktet. Hvis figuren allerede var lukket eller er blot et punkt, så gør metoden intet.
Lad os tegne en trekant ved hjælp af 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); - dette trin udelades
ctx.closePath();
ctx.stroke();
:
Udfyldning af figurer
I stedet for metoden stroke kan man bruge
metoden fill - her behøver figuren ikke nødvendigvis
at være fuldstændig lukket - den vil blive udfyldt
alligevel:
<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); - dette trin udelades
//ctx.closePath(); - og denne også
ctx.fill();
:
