Creare un Image Flip con i canvas

flipNell’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.

Leggi »

Canvas: Cambiare il colore di un’immagine e renderla semi-trasparente

Utilizzare il canvas per modificare le immaginiCon 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à.

Leggi »

Ottimizzazione dei CSS e accelerazione grafica

accell-browsersAlcuni 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.

Leggi »

HTML5: Canvas e immagini

Canvas e immagini: drawImageLa 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.

Leggi »

HTML5 Canvas – Disegnare forme geometriche

HTML5 CanvasOggi, 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.

Leggi »