Disegnamo un Cocomero con i Canvas

Disegnamo un Cocomero con i Canvas

Eccoci di fronte ad una nuova puntata che parla dell'elemento canvas! In questa puntata andremo ad imparare come sia possibile disegnare archi e cerchi completi andando a costruire qualcosa che raramente si vede sugli schermi, una bella fetta di cocomero!  

Contenuti Extra

L'elemento Canvas in HTML5

In questo Sentiero verrete a conoscenza di quali effetti è possibile realizzare all’interno degli elementi canvas HTML5. Apprenderemo come sia possibile programmare determinate caratteristiche attraverso il linguaggio JavaScript, come interagire con i movimenti del mouse e molto altro!

  1. Canvas – Impariamo a Muovere i Primi Passi
  2. Effetti Tipografici con i Canvas
  3. Disegnamo un Cocomero con i Canvas

Ho deciso di utilizzare il cocomero come esempio, non tanto perché voglio scatenare in voi un senso nostalgico verso l’estate e le scorpacciate di cocomero che più o meno tutti ci facciamo, ma piuttosto per andare a vedere da vicino quali funzioni troviamo a nostra disposizione quando vogliamo disegnare archi e cerchi completi.

Nella prima lezione di questo corso avevamo visto brevemente come utilizzare le curve di Beizer e le curve Quadratiche per creare il nostro primo percorso (se desiderate la realizzazione di una lezione focalizzata su questi due tipi di curva ricordatevi che la sezione commenti è in attesa delle vostre richiesta!) e benché sia possibile creare degli archi con questi metodi le API dell’elemento canvas ci forniscono dei metodi molto più semplici per la creazione di questi elementi geometrici e anche per creare interi cerchi!

Per questa puntata non saranno molte le cose da conoscere, visto che man mano che presenteremo i nuovi metodi provvederò a spiegarveli nel dettagli. É comunque consigliata una conoscenza base del HTML5 e del suo elemento canvas nonché una discreta conoscenza del linguaggio JavaScript che ci fornirà accesso alle API di questo elemento.

Cosa Realizzeremo

Il Cocomero realizzato con i Canvas

Ecco la nostra fetta di cocomero!

Come possiamo vedere con i nostri occhi questa fetta di cocomero è veramente molto semplice, ma quali sono gli elementi geometrici che la compongono? Ovviamente archi e cerchi! Infatti abbiamo utilizzato il primo arco per delineare la crosta del cocomero e successivamente abbiamo creato diversi cerchi, di diverso diametro, per creare i semi che sono sparsi per tutta la fetta del frutto.

Quindi il concetto è abbastanza chiaro, ma come possiamo realizzare questo cocomero andando ad inserire del semplice JavaScript?

Markup di Base

Prima ancora di andare a rispondere a questa domanda dobbiamo fare in modo che il nostro progetto sia pronto ad ospitare il nostro esperimento, per fare questo non dobbiamo far altro che creare un file HTML di base ed inserire al suo interno il seguente codice:

Ovviamente il codice appena presentato dovrà essere inserito all’interno dell’elemento body della nostra pagina. Ma non siamo qua per imparare HTML, almeno non oggi! Quello che vogliamo apprendere oggi è come sia possibile disegnare un cocomero all’interno delle nostre pagine web utilizzando le API che i canvas ci mettono a disposizione!

Prepariamo il Canvas

Vogliamo disegnare il cocomero, ma prima ancora di poter inserire il nostro codice JavaScript dobbiamo dire al browser che utilizzeremo questo linguaggio per disegnare all’interno dell’elemento canvas. Per fare questo ci posizioneremo sotto alla chiusura dell’elemento canvas ma prima della chiusura dell’elemento body ed andremo ad inserire quanto segue:

Grazie all’utilizzo del codice HTML5 non è più necessario inserire l’attributo type all’interno dell’elemento script, i nostri browser saranno in grado di comprendere automaticamente quale linguaggio stiamo utilizzando. Il codice inserito all’interno di questo elemento è il classico codice che ci permette di selezionare il nostro canvas, controllare che per il nostro canvas sia disponibile il metodo getContext() ed in caso affermativo andremo ad assegnare ad una variabile il valore restituito dal metodo getContext(2d). Ma prima ancora di andare ad inserire metodi e proprietà per poter disegnare la nostra fetta di cocomero dobbiamo assicurarci ulteriormente che il metodo getContext() abbia restituito un valore positivo; infatti nel caso in cui il nostro canvas non fosse in grado di supportare il contesto 2d alla variabile ctx non sarebbe stato assegnato alcun valore, rendendo falso il controllo lanciato dal ciclo if.

Tutto chiaro fino ad ora? Bene possiamo proseguire! (Per qualsiasi dubbio o problema vi ricordo che in fondo a questo articolo troverete la sezione dei commenti a vostra disposizione!)

Disegnamo il Cocomero

Bene, a questo punto tutto è pronto! La struttura HTML ce l’abbiamo, il codice JavaScript inserito ha preparato il nostro browser a disegnare sul canvas, quindi non ci resta altro che andare ad inserire alcune proprietà per disegnare la nostra fetta di cocomero! Come abbiamo imparato nella prima puntata prima di poter disegnare un qualsiasi elemento dobbiamo specificare il colore di riempimento ed il colore del bordo. La scelta dei colori per questo esercizio sarà molto semplice, avremo il colore rosso che rappresenterà la polpa del frutto (il nostro colore di riempimento) e potremmo impostare il verde rispettando il colore della sua buccia (ovvero il colore della traccia). Impostare questi due colori per il nostro elemento sarà molto semplice, ci basterà impostare i relativi valori per le proprietà strokeStyle e fillStyle, ecco come possiamo fare:

Una cosa che mi ero dimenticato di dirvi è che il browser imposta uno spessore di default alle nostre linee pari ad 1px, nel nostro caso questa grandezza è troppo piccola, generalmente le buccie dei cocomeri sono belle spesse, quindi ho preferito impostare un valore maggiore, diciamo 8px.

Avete notato come sono stati impostati i colori? Abbiamo detto tranquillamente al browser che volevamo un colore verde per il bordo ed un colore rosso per il suo riempimento, ma non siamo certo legati a questi due colori! Infatti all’interno di queste proprietà è possibile specificare i colori proprio come siamo abituati per i CSS, quindi i valori dei nostri colori potranno essere dichiarati tramite dichiarazioni esadecimali (il classico #336699) oppure anche utilizzando le dichiarazioni RGB e RGBa (quest’ultima ci permette di impostare anche il canale alpha che determina il grado di trasparenza del colore stesso).

Impostati i colori non ci resta altro che creare il nostro primo arco!

Voglio subito focalizzare la vostra attenzione sul nuovo metodo che abbiamo appena utilizzato, il metodo arc. Questo è uno dei due metodi che le API del canvas ci mettono a disposizione per disegnare degli archi ed è giusto conoscerla da vicino:

context.arc( x, y, r, iA, fA, orario )

Andiamo ad analizzare uno per uno i vari parametri che questa funzione accetta:

  • x – specifica il valore lungo l’asse X sul quale posizionare il centro del nostro arco;
  • y – specifica il valore lungo l’asse Y sul quale posizionare il centro del nostro arco;
  • r – ci permette di definire l’ampiezza del raggio del nostro arco;
  • iA – permette di specificare l’angolo iniziale nel quale far partire il nostro arco, attenzione l’unità di misura sono radianti;
  • fA – permette di specificare l’angolo finale nel quale far terminare il nostro arco, attenzione l’unità di misura sono radianti;
  • orario – parametro booleano che ci permette di indicare se il nostro arco dovrà essere disegnato in senso orario o in senso antiorario.

Come possiamo notare all’interno dei canvas i valori degli angoli vengono definiti per radianti e non per i più comuni gradi, quindi sarà necessario passare questi tipi di valori. Non preoccupatevi troppo perché, se siete come me e non sapete come definire un angolo retto in radianti, il linguaggio JavaScript ci viene in soccorso permettendoci di calcolare in modo molto semplice i valori degli angoli in radianti partendo dal valore dei gradi, come? Date un’occhiata al codice sopra proposto per capire:

( Math.PI / 180 ) * grado

Grazie a questa semplicissima formula matematica ci basterà sostituire la parola grado con il valore da noi selezionato per avere a disposizione il suo valore espresso in radianti, facile vero?

Bene, abbiamo visto da vicino il metodo arc ma ci sono alcune cose che ancora non abbiamo spiegato nel dettaglio; ad esempio, prima di poter disegnare qualsiasi arco all’interno del nostro canvas dobbiamo sempre specificare la nostra intenzione utilizzando il metodo context.beginPath(), successivamente alla dichiarazione dell’arco dobbiamo dire al browser di colorare il bordo e il riempimento con i metodi context.stroke() e context.fill(). Ecco fatto la nostra fetta di cocomero è pronta!

Ma dove sono i semi???

Avete ragione, ho omesso come sia possibile disegnare i semi! Ma a questo punto dovreste essere in grado di immaginarvi come sia possibile realizzarli, o forse no? Per dovere di cronaca vi lascio qua sotto il codice necessario per creare il primo seme, come esercizio vi lascio creare gli altri!

In poche parole ho creato i semi utilizzando lo stesso codice che abbiamo usato per creare la fetta del cocomero, ma in questo caso ho cambiato il colore di riempimento e ho impostato l’angolo finale a 2*Math.PI per assicurarmi che l’arco esegua un giro completo. [Avete notato anche che ho omesso il metodo context.stroke()? Semplicemente perchè in questo caso ci interessa soltanto il suo riempimento!]

Conclusioni

Siete giunti fino a qua? I miei complimenti! Da oggi siete in grado di disegnare i vostri archi all’interno dell’elemento canvas, può sembrare poca cosa, ma vi assicuro che questi elementi saranno molto utili quando andrete a costruire le vostre applicazioni! Volete dei compiti per casa? Andatevi a vedere il significato del metodo context.arcTo() che rappresenta la via alternativa per realizzare gli archi all’interno dei canvas!

Lascia il tuo Pensiero