Tutorial sulle Canvas
Da MDC.
<canvas> è un nuovo elemento HTML che può essere utilizzato per disegnare elementi grafici utilizzando lo scripting (di solito JavaScript). Per esempio può essere utilizzato per disegnare grafici, fare composizioni di foto o fare semplice (e non così semplice) animazioni.
L'immagine a destra mostra alcuni esempi di implementazioni di <canvas> che vedremo più avanti in questo tutorial.
<canvas> è stato introdotto prima da Aapple per il Mac OS X Dashboard e sopo implementato da Safari. Anche il browser basato sulla 1.8 Gecko, come ad esempio Firefox 1.5, supporta questo elemento. L'elemento <canvas> è anche parte delle specifiche WhatWG Web applications 1.0 conosciute come HTML 5
In questo tutorial proverò a descrivere come implementare l'elemento <canvas> nelle tue pagine HTML. Gli esempi forniti dovrebbero darvi dei chiarimenti di cosa tu puoi fare con <canvas> e come può essere utilizzato per iniziare a costruire le tue implementazioni.
[modifica] Prima di iniziare
Utilizzare l'elemento <canvas> non è molto difficoltoso, ma devi conoschere le badi di HTML e JavaScript.
Come detto sopra, l'elemento <canvas> non è supportato in tutti i moderni browser, così hai bisogno di Firefox 1,5 o un altro browser recente basato su Gecko o Opera 9 oppure una versione recente di Safari per visualizzare tutti gli esempi in azione.
[modifica] In questo tutorial
- Utilizzo di base
- Disegnare forme
- Usare immagini
- Applicare stili e colori
- Trasformazioni
- Composizioni
- Animazioni di base