DEV Community

loading...
Cover image for Canvas javascript : Disegnare figure regolari

Canvas javascript : Disegnare figure regolari

camizzilla profile image Roberto Updated on ・4 min read

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');
Enter fullscreen mode Exit fullscreen mode

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.

Alt Text

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.

Alt Text

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);
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode
  • 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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (5)

pic
Editor guide
Collapse
casiimir profile image
casiimir

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/...

Collapse
camizzilla profile image
Roberto Author

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?

Collapse
casiimir profile image
casiimir

Ma certamente, Inseriscilo pure!

Collapse
camizzilla profile image
Roberto Author

Grazie mille, sono contento che ti piaccia.
Andrò sicuramente a dare un occhiata al tuo repository e ti farò sapere.

Collapse
valix85 profile image
Valerio

Bellissima guida ;)