Canvas javascript : Disegnare figure regolari

Vediamo come disegnare delle figure geometriche nel canvas con il tool di funzioni che ci mette a disposizione il metodo getContext.

Per prima cosa prepariamo il canvas, ho scritto un post: Canvas javascript : Un potente strumento per la grafica sul web, dove scrivo un po' più approfonditamente: cos'è il canvas, quando si usa e come inizializzarlo, quindi non mi dilungherò su questo punto.

let canvas = document.getElementById('myCanvas');
canvas.width = 600;
canvas.height = 400;

let ctx = canvas.getContext('2d');

Ma prima di iniziare a disegnare a schermo vediamo come funziona la griglia così sarà più facile comprendere le dinamiche.

GRIGLIA

Il canvas è una griglia di pixel sviluppata su un piano cartesiano che parte dal punto di origine O e si sviluppa sull’asse delle X in larghezza e sull’asse delle Y in lunghezza.

Grazie alle coordinate della griglia possiamo posizionare degli oggetti bidimensionali nello spazio.

Nella figura sottostante ho posizionato un quadrato di 40X40 pixel nelle coordinate x:50 e y:40 rispetto al punto di origine 0, che ha coordinate x:0, y:0.

Le coordinate vengono calcolate dal vertice in alto a sinistra.

Nel programma sottostante fatto da casiimir, al passaggio del mouse si possono vedere, dinamicamente, le coordinate in una griglia 400x400.

RETTANGOLO

Per visualizzare dei rettangoli ci sono tre funzioni:

• fillRect(x, y, width, height) Che disegna un rettangolo pieno
• strokeRect(x, y, width, height) Che disegna il bordo di un rettangolo
• clearRect(x, y, width, height) Che cancella una porzione di forma rettagolare

Tutte e 3 queste funzioni prendo come attributi, le coordinate per posizionarlo sul canvas (x, y) e le dimensioni, larghezza e altezza (width, height).

ctx.fillRect(50, 50, 100, 100);
ctx.strokeRect(200, 50, 100, 100);

ctx.fillRect(350, 50, 100, 100);

ctx.clearRect(350, 50, 50, 50);

Con fillRect abbiamo disegnato un quadrato 100x100px e lo abbiamo posizionato al 50esimo px della griglia sia in altezza che in larghezza, poi con fillRect abbiamo disegnato di fianco al primo una cornice quadrata della stessa dimensione.
Per far vedere come funziona clearRect abbiamo creato un quadrato uguale al primo e nella stessa posizione abbiamo cancellato un rettangolo di 50px per lato.

Questo è il risultato

Così monocromantici non sono molto allegri, ma per lo stile ho deciso che creerò un post dedicato, anche perchè c'è ne da dire anche su questo argomento e non volevo fare un papiro.

PATH

Per disegnare tutte la altre figure che non siano rettangoli, dobbiamo conoscere la funzione beginPath(), che tiene traccia dei punti della figura geometrica che andremo creare.

Per capire meglio il beginPath disegnamo un linea retta.

Linea

Con questo script creeremo una linea retta di due punti.

ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(300, 100);
ctx.stroke();

• Con beginPath() creiamo un nuovo percorso di coordinate.
• moveTo crea un punto senza che questo venga tracciato.
• lineTo crea un punto che si traccerà con una linea che parte dal punto precedente e arriva nella coordinate passate come argomento.
• stroke disegna le linee unendo i punti salvati nel path, senza questa funzione non verrebbe renderizzato nulla a schermo.

Linea tratteggiata

In questo path alterniamo moveTo con lineTo per creare una linea tratteggiata.

ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(100, 150);
ctx.moveTo(150, 150);
ctx.lineTo(200, 150);
ctx.moveTo(250, 150);
ctx.lineTo(300, 150);
ctx.stroke();

Nella linea tratteggiata si vede meglio l'utilità del moveTo che si sposta sulla griglia senza essere tracciata.

Linea frastagliata

ctx.beginPath();
ctx.moveTo(50, 275);
ctx.lineTo(100, 200);
ctx.lineTo(200, 270);
ctx.lineTo(300, 210);
ctx.stroke();

Per creare una linea frastagliata bisogna creare vari punti sul canvas e poi collegarli.

Questo è il risultato

FIGURE GEOMETRICHE PIANE

Una volta imparato il funzionamento delle linee, le figure piane non sono altro un serie di linee... chiuse.

Ad esempio se volessimo fare un triangolo non dobbiamo fare altro che creare 3 punti, in cui l'ultimo punto deve avere le coordinate del primo punto, nel nostro caso il moveTo.

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 150);
ctx.lineTo(50, 50);
ctx.stroke();

Un'altra opzione per chiudere una figura piana è sostituire l'ultimo punto, quello che torna alla coordinata iniziale, con la funzione closePath che chiude il percorso e la figura creata automaticamente.

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 150);
ctx.closePath()
ctx.stroke();

Con questi codici abbiamo stampato a video il perimetro di un triangolo, perchè la funzione stroke unisce i vari punti con delle linee. Se volessimo avere delle figure piene non dovremmo dare altro che sostituire stroke *con la funzione *ctx.fill().
Ecco degli esempi di figure geometriche.

CONCLUSIONE

In questo abbiamo appreso come disegnare sul canvas delle figure geometriche regolari.
Nel prossimo post "Disegnare figure geometriche con le curve" andremo a conoscere anche le figure con curve, tra cui il cerchio.

Se avete dei consigli, suggerimenti o critiche costruttive lasciatemi un commento qui sotto oppure contattatemi trammite i miei social.