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. -
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 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.
Top comments (5)
Ottima guida, complimenti davvero Roberto.
Non saprei cosa consigliare... pensandoci ho un repo di una griglia in canvas che ho utilizzato in passato (il codice è un po sporco, ero agli inizi) ma l'idea è carina e molto utile, dacci un'occhiata e fammi sapere!
Buone feste!
casiimir.github.io/all-the-stuff/c...
repo: github.com/casiimir/all-the-stuff/...
Ciao, ho dato un occhio alla tua griglia e l'ho trovata interessate, nonostante si vede che è un lavoro alle prime armi. ;-) . Se tu sei d'accordo, mi piacerebbe usarla per il mio post, perchè spiega bene come funziona la griglia. Possola usarla citandoti?
Ma certamente, Inseriscilo pure!
Grazie mille, sono contento che ti piaccia.
Andrò sicuramente a dare un occhiata al tuo repository e ti farò sapere.
Bellissima guida ;)