Tegning av linjer via canvas i JavaScript
La oss starte enkelt - med å tegne linjer. For å forstå hvordan dette gjøres, se for deg at du har et ark papir og en blyant. Du kan tegne på dette arket, eller du kan uten å tegne bare flytte blyanten til ønsket punkt.
JavaScript fungerer på samme måte: den har en
blyant (eller penn for tegning), til ønsket
sted kan du flytte den ved hjelp av
metoden moveTo, og tegne - ved hjelp av
metoden lineTo.
Begge metodene tar som parametere et punkt, som
penntuppen skal flyttes til - første parameter
er koordinaten horisontalt, og den andre - vertikalt.
Koordinatenes opprinnelse - punkt 0,
0 - er øvre venstre hjørne av elementet.
Når pennen flyttes til ønsket punkt -
metoden moveTo flytter bare, mens
lineTo under flyttingen tegner en
linje fra pennens nåværende posisjon til punktet
den flyttes til.
Men, hvis du kjører koden ovenfor
- vil ingenting skje: det er nødvendig å skrive
to kommandoer til: den første kommandoen beginPath
må angis før starten av linjetegningen,
og den andre kommandoen stroke må
kalles etter alle kombinasjoner av moveTo
og lineTo for at linjen skal tegnes.
Så, la oss skrive en fungerende kode for å tegne en linje:
La oss 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();
:
La oss tegne en fugl
<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();
:
La oss 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();
:
La oss 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();
:
Lukking av figurer
For å tegne en lukket figur er det ikke nødvendig
å lage alle linjene - den siste linjen kan
tegnes automatisk og lukke figuren.
For dette, før metoden stroke, bør
du kalle metoden closePath.
Denne metoden prøver å lukke figuren ved å tegne en ret linje fra sluttpunktet til startpunktet. Hvis figuren allerede var lukket eller er bare et punkt, gjør metoden ingenting.
La oss tegne en trekant ved å bruke 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 trinnet utelater vi
ctx.closePath();
ctx.stroke();
:
Fylling av figurer
I stedet for metoden stroke kan du bruke
metoden fill - i dette tilfellet trenger ikke
figuren nødvendigvis å være helt lukket - den vil fylles
uansett:
<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 trinnet utelater vi
//ctx.closePath(); - og denne også
ctx.fill();
:
