Creare siti web HTML5 sempre attuali – il CANVAS

Inserire Video HTML5

Libro Questo sito funziona

Canvas HTML5 <canvas> è stato un tag inventato e introdotto originariamente da Apple nel 2004 (in visione futura per la vendita del primo iPhone nel 2007) come soluzione interna di rendering per le immagini in Webkit, il motore usato da safari prima e chrome poi. Nel 2006 è stato adottato da altri produttori di Browser fra i quali Google e successivamente è diventato parte delal specifica HTML5 su richiesta del W3C.

A cosa serve e quali sono i compiti

Il tag <canvas> definisce una regione sulla pagina che puà essere disegnata per usare gli script in modo dinamico.

Viene consentita al suo interno la generazione di immagini procedurali come grafici e immagini vettoriali! A questo si aggiungono applicazioni interattive come il disegno, l’animazione e i giochi.

Il sistema canvas funziona come una qualsiasi API di disegno bidimensionale, che fornisce una serie di metodi con cui disegnare rettangoli, cerchi, linee e testo.

Vi segnalo qui una serie di articolio interessanti sui grafici disegnati con HTML5:

 

Quali vantaggi offre CANVAS

Man mano che il web diventa più preciso sia dal punto di vista dello sviluppo che del design, gli utenti si aspettano giustamente di poter fare sempre qualcosa in più. Questo significa cpoter visualizzare un grafico interattivo che risponde ai loro input, come un calcolatore per il pagamento della rata del mutuo o un’app per l’editing delle immagini (tipo quella che sta in wordpress).

In passato, per elaborare e renderizzare gli aspetti grafici, queste due applicazioni avrebbero richiesto plug-in di terze parti come Flash oppure massiccissime librerie Javascript.

Con l’introduzione di <CANVAS>  queste operazioni possono essere renderizzate in modo nativo del browser, offrendo cosi una soluzione più accessibile e di facile gestione.

Lo scenario tipico con cui usare <CANVAS> è quando non è possibile creare in anticipo una rappresentazione visuale dei dati: per esempio, se si tratta di dati sullo scambio di azioni, <CANVAS> è la soluzione ideale per renderizzare un grafico che riflette i prezzi attuali e passati di una specifica azione. Poichè l’immagine viene creata attraverso lo script nel momento in cui la pagina viene renderizzata, la grafica sarà sempre aggiornata e conterrà i feed di dati più recenti.

Ecco a questo punto mi rendo conto che questo pezzo di articolo non sarà facilmente comprensibile a tutti i non sviluppatori però in futuro ci tornerò e tutto, se non già chiaro ora, sarà più chiaro in futuro.

html5

Come iniziare ad usare canvas?

l’API canvas offre diversi metodi, tra cui la possibilità di renderizzare le immagini bitmap da file esterni. Tuttavia, nella sua forma più banale, è molto facile aggiungere canvas alla pagina: basta inserire il tag <canvas>.

<canvas id="mycanvas" width="400" height="400"></canvas>

Se il browser non supporta canvas vi apparirà un messaggio.

Il disegno di una forma avviene tramite javascript. Vediamo un esempio:

<canvas id="mycanvas" height="400" width="400"></canvas>
<script>
    var mycanvas = document.getElementById('mycanvas');
    var context = mycanvas.getContext('2d');
    context.fillStyle = 'blue';
    //                   X     Y   Widht   height
    context.fillRect(   10,   50,   100,   150);
</script>

Qual’è il livello di supporto di canvas?

Tutti i principali browser supportano oggi canvas, a eccezione di Internet Explorer 8 e versioni precedenti. Di conseguenza, è ormai possibile implementare nel sito we immagini canvas senza doversi preoccupare troppo dei fallback riguardanti il contenuto o il design.

Flash nei siti web moderni viene praticamente scaricato come si fa per la nuova fiamma. Il tag <canvas> sta diventando il sostituto basato sugli standard che consente ai designer di continuare a offrire interfacce utente sofisticate ed eleganti, che vanno oltre ciò che si può realizzare con i soli CSS.

E’ un’ottimo modo per creare immagini interattive leggere e quindi giocare con la fantasia non è più impossibile! 😉

 

Cos’altro è in grado di fare canvas HTML5

Può essere usato per creare animazioni che interagiscono con l’input dell’utente. Questo lo rende una soluzione ideale per realizzare dei giochi. Può essere anche sfruttato come metodo per la renderizzazione dei canali alfa nei contenuti video o cosa assai importante (finalmente!) per visualizzare nel browser formati video non supportati, consentendo così la visione di un singolo formato in tutti i browser, indipendentemente dai formati dei video proposti.

Esempi di canvas HTML5 online

Faccio finta di non sapere che esiste Google dal quale si posso estrarre milioni di esempi canvas. Di sicuro un ottimo punto di partenza è www.html5canvastutorials.com che fornisce un set completo di tutorial ed esempio che dimostrano le immagini canvas interattive, che utilizzano le proprietà di shadow, i tracciati SVG e funzionalità come il drag & drop.

Commenti? 🙂

 

Articoli di questa serie:

Libro Questo Sito Funziona