Rita linjer med canvas i JavaScript
Låt oss börja med enkelt - att rita linjer. För att förstå hur det görs, föreställ dig att du har ett papper och en penna. Du kan rita på detta papper, eller så kan du bara flytta pennan till önskad punkt utan att rita.
JavaScript fungerar på samma sätt: det har
en penna (eller ritpenna), till önskad
plats kan du flytta den med hjälp av
metoden moveTo, och rita - med hjälp av
metoden lineTo.
Båda metoderna tar som parametrar en punkt att
flytta pennspetsen till - första parametern
är koordinaten horisontellt, och den andra - vertikalt.
Koordinaternas ursprung - punkten 0,
0 - är elementets övre vänstra hörn.
När pennan flyttas till önskad punkt -
så flyttar metoden moveTo bara, medan
lineTo under flytten ritar en
linje från pennans nuvarande position till punkten
där den flyttas.
Men om du kör koden ovan
så händer ingenting: det är nödvändigt att skriva
ytterligare två kommandon: det första kommandot beginPath
ska anges innan linjeritningen börjar,
och det andra kommandot stroke måste
anropas efter alla kombinationer av moveTo
och lineTo för att linjen ska ritas.
Så, låt oss skriva fungerande kod för att rita en linje:
Låt oss rita 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();
:
Låt oss rita en fågel
<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();
:
Låt oss rita en triangel
<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();
:
Låt oss rita en kvadrat
<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();
:
Stänga figurer
För att rita en stängd figur behöver du inte
göra alla linjer - den sista linjen kan
ritas automatiskt och stänga figuren.
För detta, före metoden stroke, bör
du anropa metoden closePath.
Denna metod försöker stänga figuren genom att rita en rak linje från slutpunkten till startpunkten. Om figuren redan var stängd eller är bara en punkt, så gör metoden ingenting.
Låt oss rita en triangel med hjälp av 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); - detta steg utelämnar vi
ctx.closePath();
ctx.stroke();
:
Fyllning av figurer
Istället för metoden stroke kan du använda
metoden fill - i detta fall behöver figuren inte nödvändigtvis
vara helt stängd - den kommer att fyllas
ändå:
<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); - detta steg utelämnar vi
//ctx.closePath(); - och detta också
ctx.fill();
:
