HTML and CSS Reference
In-Depth Information
Con il primo evento, che si verifica quando l'utente porta il mouse sull'elemento, appli-
chiamo una trasformazione che ingrandisce l'elemento, mentre nel secondo rimuoviamo la
trasformazione; oltre a questo, valorizziamo un tag HTML5 con ID current con il valore
dell'elemento su cui stiamo passando. Quello che otteniamo al passaggio del mouse sulla
fetta gialla è visibile nella figura 10.11 .
Figura 10.11 - Un documento SVG che reagisce alle azioni dell'utente, grazie al JavaS-
cript.
Visto che con JavaScript possiamo manipolare gli oggetti, possiamo anche applicare ani-
mazioni agli stessi, utilizzando la funzione setInterval , che permette di ripetere a in-
tervalli regolari una funzione. In essa possiamo incrementare posizioni, applicare trasfor-
mazioni o cambiare colori. In realtà, esiste nelle specifiche di SVG Animation la possibilità
di usare tag specifici per l'animazione degli elementi e delle loro proprietà, ma sono po-
co sfruttate, perché con JavaScript possiamo ottenere lo stesso risultato e avere il massimo
della flessibilità.
Chi già conosce JavaScript e mastica il DOM non dovrebbe trovare difficoltà ad appli-
care queste tecnologie a SVG, poiché non ci sono particolari considerazioni da fare a ri-
guardo, salvo il fatto che questo linguaggio è nato per figure statiche, definite appunto tra-
mite il markup. Se invece quello di cui necessitiamo è una forte capacità di rendering, sia in
termini di prestazioni sia di flessibilità, allora è più opportuno prendere in considerazione
il canvas .
Grafica bitmap con il canvas
Il canvas è un nuovo elemento di HTML5 che ha come obiettivo rispondere all'esigenza
di avere una superficie dove renderizzare al volo bitmap. È la scelta giusta se non ci sono
altre possibilità di rendering e trova il massimo della sua utilità nei giochi, dove le scene
cambiano più volte al secondo.
 
Search WWH ::




Custom Search