Disegnare linee tramite canvas in JavaScript

Iniziamo con qualcosa di semplice - disegnare linee. Per capire come funziona, immagina di avere un foglio di carta e una matita. Tu puoi disegnare su questo foglio, oppure puoi spostare semplicemente la matita nel punto desiderato senza disegnare.

Allo stesso modo funziona JavaScript: ha una matita (o una penna per disegnare), nel punto desiderato puoi spostarla usando il metodo moveTo, e disegnare - usando il metodo lineTo.

Entrambi i metodi accettano come parametri il punto in cui spostare la punta della penna - come primo parametro la coordinata orizzontale, e come secondo - quella verticale. L'origine delle coordinate - il punto 0, 0 - è l'angolo in alto a sinistra dell'elemento.

Quando la penna si sposta nel punto desiderato - il metodo moveTo semplicemente sposta, mentre lineTo durante lo spostamento disegna una linea dalla posizione corrente della penna fino al punto in cui essa si sposterà.

Tuttavia, se esegui il codice sopra - non succederà nulla: è necessario scrivere altri due comandi: il primo comando beginPath deve essere indicato prima di iniziare a disegnare la linea, e il secondo comando stroke deve essere chiamato dopo tutte le combinazioni di moveTo e lineTo affinché la linea venga disegnata.

Quindi, scriviamo un codice funzionante per disegnare una linea:

Disegniamo una linea

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

Результат:

Disegniamo una freccia

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

Результат:

Disegniamo un triangolo

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

Результат:

Disegniamo un quadratino

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

Результат:

Chiusura delle figure

Per disegnare una figura chiusa non è obbligatorio disegnare tutte le linee - l'ultima linea può essere disegnata automaticamente e chiudere la figura. Per fare questo, prima del metodo stroke si deve chiamare il metodo closePath.

Questo metodo tenta di chiudere la figura, disegnando una linea retta dal punto finale a quello iniziale. Se la figura era già chiusa o è semplicemente un punto, allora il metodo non fa nulla.

Disegniamo un triangolo, usando 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); - questo passo lo omettiamo
ctx.closePath();
ctx.stroke();

Результат:

Riempimento delle figure

Invece del metodo stroke si può usare il metodo fill - in questo caso la figura non deve necessariamente essere completamente chiusa - si riempirà comunque:

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); - questo passo lo omettiamo
//ctx.closePath(); - e anche questo
ctx.fill();

Результат:

Problemi pratici