HTML5 canvas in tempo reale
Quando usare <canvas>
Diversi sono i motivi che spingono a voler utilizzare le funzioni canvas di HTML5 con le sue molteplici possibilità.
- Interattività: essendo <canvas> interattivo, cioè rispondere alle azioni dell'utente.
Questo avviene attraverso l'ascolto per gli eventi da tastiera, mouse ecc.
Non è quindi limitato alle immagine statiche. - Animazione: Ogni oggetto disegnato su <canvas> può essere animato.
- Flessibilità: Non ci sono praticamente limiti alle forme utilizzabili, linee, testo, immagini, ecc
Oltre a queste anche audio e video. - Multipiattaforme di supporto: <canvas> è supportato da tutti i principali browser (autunno 2016) e può essere fruito su dispositivi tipo tablet e smartphone iPhone, iPad oltre che naturalmente, desktop.
- Opensource: Cioè tecnologia aperta e di libero utilizzo.
L'elemento HTML5 <canvas>, per le sue qualità, si sta rendendo indispensabile, rendendo obsolete tecnologie proprietarie in auge negli anni passati.
Il tag <canvas> è affine ad altri come ad esempio <div> , <table> ecc. e viene di norma definito utilizzando gli attributi width (larghezza) e height (altezza).
Due importanti differenze contraddistinguono questo tag da tutti gli altri.
- Il suo contenuto può essere elaborato con JavaScript.
- Suffisso px che normalmente indica la quantità di pixel delle dimensioni, non è tecnicamente consentito dalle <canvas> ma viene assunto di default.
Secondo le specifiche, i valori per questi attributi, possono essere solo numeri interi positivi.
La loro dichiarazione è simile a quella dei CSS in linea, ad esempio:
<canvas id="Canvas" width="800" height="600"></canvas>
Notare che i valori 800 e 600 non sono seguiti da nessuna unità di misura, il sitema assume che siano pixel.
Il tag <canvas> è normalmente inserito fra i tag <body> .....<body> e posizionato in un qualsiasi punto della pagina sia ritenuto opportuno.
Per accedere al tag <canvas> con JavaScript, occorre creare un contesto (2d o 3d), e quindi utilizzare i comandi messi a disposizione per le elaborazioni.
Come gli altri tag l'elemento <canvas> è un nodo DOM incorporato nella pagina HTML, mentre il contesto 2D o WebGL (3d) è un oggetto con proprietà e metodi utilizzabili per il rendering della grafica all'interno dell'elemento <canvas>.
Ogni elemento <canvas> può avere un solo contesto, usando il metodo getContext () più volte, verrà restituito sempre un riferimento allo stesso oggetto.
In questa guida verrà sempre utilizzato il codice
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
che sarà sempre sottinteso.
Se usato con dimensioni diverse sarà specificato di volta in volta.
-
Acquistabile da:
- bookrepublic
- ebook LeggoOggi.it
- EURONICS
- freeonline
- Gola Ad
- GPLAY
- HOEPLI
- iTunes
- kobo
- omnia BUK
- SECRETARY
- StreetLib
Art-designer