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

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.

letcanvas=document.getElementById('myCanvas');canvas.width=600;canvas.height=400;letctx=canvas.getContext('2d');

Ma prima di iniziare a disegnare a schermovediamo 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 possiamoposizionare 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 dacasiimir, 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 unrettangolo pieno
• strokeRect(x, y, width, height)Che disegnail bordo di un rettangolo
• clearRect(x, y, width, height)Checancella 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);

ConfillRect abbiamo disegnato un quadrato 100x100px e lo abbiamo posizionato al 50esimo px della griglia sia in altezza che in larghezza, poi confillRect abbiamo disegnato di fianco al primo una cornice quadrata della stessa dimensione.
Per far vedere come funzionaclearRect 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 funzionebeginPath(), chetiene traccia dei punti della figura geometrica che andremo creare.

Per capire meglio ilbeginPath 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();

• ConbeginPath()creiamo un nuovopercorso di coordinate.
• moveTocrea un punto senza che questo venga tracciato.
• lineTocrea un punto che si traccerà con una linea che parte dal punto precedente e arriva nella coordinate passate come argomento.
• strokedisegna le linee unendo i punti salvati nel path, senza questa funzione non verrebbe renderizzato nulla a schermo.

Linea tratteggiata

In questo path alterniamomoveTo conlineTo 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 megliol'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 volessimofare un triangolo non dobbiamo fare altro checreare 3 punti, in cuil'ultimo punto deve avere le coordinate del primo punto, nel nostro caso ilmoveTo.

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 funzioneclosePath 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 ilperimetro di un triangolo, perchè la funzionestrokeunisce i vari punti con delle linee. Se volessimoavere delle figure piene non dovremmo dare altro che sostituirestroke *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.