SVG è una tecnologia utile per definire elementi di grafica vettoriale definita fin dal 2001 dal W3c. Capita ormai di imbatterci in alcuni elementi grafici o animazioni su web che non siano gestite con Flash o Javascript, ma con SVG e, aspettando che anche Internet Explorer, nella versione 9, possa supportare questo standard cerchiamo di introdurre con un semplice esempio questo linguaggio.
Come nelle precedenti vacanze estive dove ho giocato con l’elemento canvas per creare un effetto demo old-school, anche per questo periodo di feste che, ahimè, per il sottoscritto feste non sono affatto state, ho volute rifarmi con un secondo effetto grafico classico che visualizzi i mostri che la mia ragione ha creato dopo la 48 ore Natale-Santo Stefano a tavola.
In questi giorni estivi un po’ più calmi del solito mi sono messo a leggere con calma gli articoli sul tag CANVAS redatti da Alessandro,
<img class="alignleft" style="margin: 0pt 10px 10px 0pt" src="../wp-content/uploads/2010/05/favs.gif" alt="favs" width="190" height="140" />E' sempre l'ultima cosa che mi viene in mente di fare: creare la <strong>favicon per un sito web</strong>.
Eppure, essendo un tab-maniaco con una media di 5/10 tab aperte contemporaneamente penso che la favicon sia una delle cose più utili nel riconoscimento della pagina in quella giungla di linguette.
Nei miei post precedenti riguardanti HTML5 ho usato alcune istruzioni per manipolare i colori delle forme geometriche e degli elementi creati nel Canvas. Oggi vedremo di approfondire la gestione dello stile di ciò che componiamo nel Canvas per ottenere elementi graficamente più gradevoli.
La gestione delle immagini con il Canvas è una delle feature più interessanti per lo sviluppo web che ci viene offerta da HTML5. Grazie al Canvas, infatti, possiamo importare immagini all’interno dei nostri documenti per elaborarle dinamicamente in modo da ottenere, ad esempio, foto-composizioni. Avremo inoltre la possibilità di modificare le dimensioni delle immagini importate, potremo aggiungere del testo e sfruttare molte altre funzionalità che analizzeremo in questo post.
Oggi, finalmente, inizieremo ad approfondire le prime funzioni che l’HTML5 ci offre. In particolare ci occuperemo dell’elemento Canvas: un contenitore di elementi grafici utile per realizzare piccoli disegni e animazioni. L’elemento canvas costituisce la superficie sulla quale possiamo creare i nostri disegni ed elaborare elementi grafici tramite le funzioni che approfondiremo in questo post.
