Nell’ultimo post ho avuto modo di giocare con le trasformazioni del canvas. Mi è venuto in mente che potesse essere utile avere una classe in mootools che prendesse un’immagine presente nella pagina e mi desse la possibilità di fare un flip orizzontale (o verticale della stessa) per ogni evenienza.
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.
Con l’articolo di oggi vado a unirmi ai miei colleghi che già in passato hanno scritto riguardo l’uso del tag canvas e vi presento questo piccolo esperimento.
In uno dei nostri ultimi siti, ci sarebbe stato comodo poter usare un’unica immagine, in varianti di colore diverse, senza però dover creare una copia dell’immagine per ciascuna tonalità.
<img class="alignleft size-full wp-image-4154" style="margin:5px 10px 10px 0" src="https://blog.artera.net/wp-content/uploads/2010/08/fx.gif" alt="fx" width="128" height="128" />In questi giorni estivi un po' più calmi del solito mi sono messo a leggere con calma gli <a href="https://blog.artera.net/tag/canvas">articoli sul tag CANVAS redatti da Alessandro</a>, non avevo ancora fatto alcun test con il tag e volevo rinfrescarmi un po' le idee.
Volendo approfondire l'argomento <strong>CANVAS</strong> mi son detto, <strong>perchè non simulare uno degli effetti demo </strong>che tanto mi piacciono?
Alcuni giorni fa, durante una piccola pausa lettura, stavo leggendo un post redatto su html.it: parlava dell’ottimizzazione dell’esperienza utente nell’utilizzo delle nuove tecnologie rese disponibili con i CSS3. L’episodio portato ad esempio si riferiva ad un “background: fixed” su Firefox.
Lo strumento Canvas di HTML5, riguardo al quale ormai siamo quasi esperti, ci offre alcune funzionalità utili per elaborare figure complesse e per modificare le impostazioni del context. Oggi introdurrò queste funzionalità utili per chi vuole approfondire il disegno con Canvas a livello completo.
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.
Oggi, seguendo la strada intrapresa col mio post precedente di introduzione all’HTML5, vorrei introdurre alcuni fra i nuovi elementi che il nuovo standard ci mette a disposizione. I tag che oggi vedremo assieme sono solo alcuni tra i più famosi introdotti dal’HTML5. Nelle prossime settimane scenderemo sempre più nel dettaglio analizzando e approfondendo con esempi l’utilizzo dei vari tag.
CHF
EUR
