HTML5 Canvas - Primi Passi

Canvas – Impariamo a Muovere i Primi Passi

Iniziamo la nuova settimana introducendo un nuovo elemento HTML5 che prende il nome di <canvas>, un elemento che non è molto differente da un classico elemento <div> oppure un <a>, tutti agiscono come contenitori. Ma l'elemento <canvas> è un tipo particolare di contenitore... Infatti è stato studiato per contenere grafiche realizzate con del semplice codice JavaScript. Cosa significa tutto questo?

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

Beh vuol dire che con l’avvento del metalinguaggio HTML5 da oggi sarete in grado di disegnare nelle vostre pagine grafici che si adatteranno al contenuto delle vostre pagine in maniera completamente naturale! Avete mai controllato la chart di Google Analytics? Se ancora non lo avete scoperto, avete quasi l’obbligo di utilizzare questo utilissimo strumento per tracciare le statistiche dei vostri siti; ma tornando a noi, il grafico che mostra i dati per il mese appena passato potrebbe essere un ottimo posto per piazzare il nuovo <canvas>.

Quindi è possibile tracciare linee e tracciati; buono a sapersi! Ma cosa pensate se vi dico che potrete aggiungere sfumature, curve ed anche ombre?!? La cosa si fa più interessante ed in questa puntata scopriremo come sia possibile muovere i primi passi con questo interessantissimo nuovo elemento!

L’elemento Canvas

Nei paragrafi precedenti abbiamo scoperto che l’elemento canvas non è altro che un contenitore per grafiche dinamiche, grafiche che possiamo creare tramite un qualsiasi linguaggio di scripting (in questa puntata vedremo da vicino il suo utilizzo con il linguaggio JavaScript), ma non ci è stato ancora possibile vedere, e successivamente analizzare, come sia possibile inserire questo elemento all’interno delle nostre pagine HTML5!

Come potete vedere, in questo caso il tag canvas assomiglia moltissimo al più comune elemento <img>, la prima differenza che possiamo notare insieme è la totale assensa degli attributi scr ed alt, ma per il resto è possibile impostare una altezza (height) ed una larghezza (width) proprio come facciamo per le immagini! Questi attributi possono essere inseriti oppure no, per questo si parla di attributi opzionali, ma possiamo utilizzare anche il DOM per impostarli in modo automatico, creando degli elementi canvas che si potranno adattare alle dimensioni dello schermo.

É inoltre possibile specificare le dimensioni anche via CSS, ma siccome queste dimensioni vengono applicate in un momento successivo al rendering del vostro grafico, magari non è la miglior soluzione. Quindi se vi trovate con il vostro canvas con strane misure applicate, impostate le sue dimensioni con gli appositi attributi impostati e non dai CSS.

Procedendo nella analisi del codice troviamo l’attributo id, attributo che permette di identificare il singolo elemento in maniera univoca! Ma cosa ancor più interessante è che l’elemento <canvas> può essere personalizzato con le varie regole di stile; come bordi, margini, sfondi… Ma che però non possono avere effetto sul grafico che verrà disegnato all’interno del nostro elemento.

Aumentiamo la Compatibilità

Come per tutti i nuovi elementi HTML5, anche per l’elemento <canvas> dobbiamo stare attenti ai problemi di compatibilità

Come potete ben vedere, i browser che ancora non supportano questo nuovo elemento sono quelli appartenenti alla famiglia IE precedenti alla versione 9, tutti gli altri browser suportano nativamente questi elementi! Ma come comportarsi per fare in modo che il layout costruito rispetti le proprie proporsioni anche sui browser più datati? Potremmo tranquillamente inserire del testo descrittivo o una immagine sostitutiva che si permetterà di rendere retro-compatibile la nostra pagina HTML5.

Forse vi state chiedendo perchéquesto semplice, e compatibilissimo, hack funziona… La ragione è molto semplice! Tutti i browser che supportano l’elemento <canvas> sanno che il suo contenuto verrà generato in maniera dinamica da un linguaggio di scriptin e di conseguenza non leggono il contenuto HTML; mentre tutti gli altri leggeranno, ed utizzeranno, ciò che contiene.

HTML5 Canvas ed il suo Contesto

Ricapitoliamo un attimo. Creare un <canvas> ci permette di andare a disegnare dei grafici ed immagini all’interno delle nostre pagine HTML5, questo è chiaro, ma a seconda delle nostre necessità potremo specificare un determinato contesto (context) che ci aiuterà fornendoci specifici tipi di rendering. In questa puntata andremo ad analizzare il contesto 2d, rimarremo sul semplice, ma giusto per introdurvi appieno l’argomento vi comunico che è presente anche un contesto 3D che ci permetterà di avere un motore 3D da utilizzare con le WebGL!

Controlliamo il Supporto

Ormai sappiamo che alcuni browser supportano questo elemento ed altri no… Quindi ci sarà molto utile andare a controllare se il browser che sta visualizzando la nostra pagina è in grado di lavorare con l’elemento <canvas> anche via JS, cosa utile visto che se il browser non supporta l’elemento potremmo salvare tempo prezioso senza andare a caricare JS.

Per fare questo non dovremo fare altro che andare a controllare il metodo .getContext() utilizzando qualcosa come segue:

Ecco che appena controllato che il browser supporti il metodo .getContext() siamo in grado di specificare il contesto 2d per il nostro futuro rendering.

Il nostro Primo Canvas

É giunto il momento di sperimentare qualcosa con mano, e niente di meglio che una pagina HTML5 pronta all’uso, e alla successiva spiegazione delle varie parti!

Ecco la pagina con la quale potete iniziare i vostri esperimenti, tutto quello che è presente all’interno del tag <body> è un unico elemento <canvas> ma la magia avviene all’interno del tag <head> racchiuso dall’elemento <script>!

Quello che facciamo fin dalla prima riga è preparare una funzione che verrà lanciata quando il DOM della pagina sarà completamente caricato, successivamente controlliamo che il browser utilizzato supporti l’elemento <canvas> e, in caso di successo, iniziamo a creare una linea rappresentata dalla seguente immagine:

Prima Linea Disegnata con i Canvas

I Metodi Utilizzati

Prima di chiudere questa puntata, vorrei andare ad analizzare uno ad uno i metodi che sono stati utilizzati per la creazione di questa linea. Nelle puntate successive andremo ad analizzare più da vicino questi metodi, ed andremo a scoprirne anche di nuovi andando a realizzare web app man mano sempre più complesse. Quindi mi raccomando, non mi sgridate se tralascio qualcosa,tutto quello che trovate qua sotto è a puro scopo introduttivo!

.beginPath()

Parlando di canvas, non possiamo definire l’immagine sopra mostrata come una linea; è molto più specifico parlare di tracciato. Infatti il metodo .beginPath() ci permette di dichiarare la nostra volontà di disegnare una traccia che verrà personalizzata con i metodi successivi.

.moveTo()

Potete pensare al metodo .moveTo() come ad un metodo che vi aiuterà a posizionare i vari punti che personalizzeranno la vostra linea, ad esempio la posizione del cursore quando utilizzate lo strumento Penna di un software di grafica come Photoshop. Per specificare il punto di riferimento dobbiamo utilizzzare le coordinate X e Y specifiche per il nostro canvas.

.lineTo()

Con il metodo .lineTo() possiamo far disegnare la nostra linea che partirà dal punto identificato dal precedente metodo .moveTo() per arrivare al punto identificato dai parametri dello stesso metodo.

.quadraticCurveTo()

Questo metodo ci permette di creare una Curva Quadratica definita dai punti di controllo X e Y (i primi due) e i punti finali X e Y (gli ultimi due); con questo metodo ci basterà quindi identificare i due punti per definire una semplicissima curva!

.beizerCurveTo()

Con il metodo .beizerCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY); ci permette di creare delle Curve di Beizer che utilizza due punti di controllo ed un punto finale per donarci la possibilità di creare delle curve più complesse, ovvero sarete in grado di creare le vostre curve con la stessa logica utilizzata dallo strumento Penna del famoso software Photoshop.

.stroke()

Il semplicissimo metodo .stroke() vi permetterà di disegnare a video il vostro tracciato per renderlo visibile all’utente finale.

Conclusioni

I lettori più attenti avranno notato che nella lista precedente non sono stati trattati due linee… Quelle dove è presente .lineWidth e .strokeStyle, questo non per una mia mancanza; ma piuttosto perché essi non sono metodi ma delle proprietà con le quali possiamo specificare alcune caratteristiche del tracciato appena creato! Infatti esse sono in grado, rispettivamente, di specificare lo spessore della vostra linea ed il suo colore.

Spero che adesso siate in grado di muovere i vostri primi passi all’interno dei vari elementi canvas e fare qualche vostro esperimento. Intanto colgo l’occasione di rassicurarvi visto che vedremo in prossime puntate molte altre caratteristiche degli effetti realizzabili all’interno di un elemento canvas! Ma nell’attesa potreste sempre farmi sapere se desiderate sapere qualcosa di specifico oppure quali siano stati i vostri personali esperimenti!

Lascia il tuo Pensiero

4 Responses to “Canvas – Impariamo a Muovere i Primi Passi”

  1. Riccardo Mel

    Bell’articolo complimenti =D anche se per creare “disegni” più complessi con i canvas sono richieste parecchie conoscenze =D

    Complimenti per il blog =D

    Rispondi
    • Andrea

      Grazie per il tuo contributo ed i tuoi apprezzamenti!
      Per quanto riguarda torneremo spesso a trattare l’argomento canvas con tutorial man mano che andremo avanti con le puntate di HTML5 and More, stavo giusto documentandomi sui GWT e gli HTML5 Canvas!

      Avevi visto che per “gioco” si sono sviluppati un Quake 2 direttamente con le WebGL?!? Fantastico!

      Rispondi
  2. Alessandro

    ciao
    complimenti per il tutorial, chiaro e tutto è spiegato in modo semplice.
    Se volessi approffondire il discorso Canvas conosci qualche guida in italiano preferibilmente o qualche libro ?
    Grazie mille e rimango in attesa di tue nuove guide

    Rispondi
    • Andrea

      Ciao Alessandro,

      mi fa piacere sapere che sei capitato su di una delle mie pagine! Al momento non ho guide di riferimento in italiano, questo perché le sto studiando in inglese, quindi al momento mi dispiace ma non posso esserti di aiuto. Comunque se desideri continuare a seguirci farai più che bene perché stiamo organizzando i nuovi contenuti e la nuova grafica che dovrà vedere la luce più o meno a metà Settembre, e tra questi troverai una piccola serie riguardante proprio i Canvas!!

      A presto!

      Rispondi