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
<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();
:
Disegniamo una freccia
<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();
:
Disegniamo un triangolo
<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();
:
Disegniamo un quadratino
<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();
:
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:
<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); - 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:
<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); - questo passo lo omettiamo
//ctx.closePath(); - e anche questo
ctx.fill();
:
