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

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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å:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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();

Результат:

Praktiska uppgifter