Page 60 - Guida tascabile HTML5
P. 60
Una soluzione più completa prevede invece la predisposizione di un tag <object>
con gli elementi necessari per visualizzare il contenuto sfruttando un plugin di terze
parti (come per esempio Adobe Flash Player): in questo modo il contenuto
multimediale potrà essere visualizzato anche in assenza di supporto dei più recenti
standard HTML5.
RIFERIMENTO Approfondiremo l’utilizzo del tag <object> più avanti in questo capitolo,
nel paragrafo dedicato ai contenuti inclusi.
Una superficie interattiva avanzata:
<canvas>
Un’altra novità introdotta con la specifica HTML5 è il tag <canvas>: inserendo
tale tag in un documento HTML si crea un’area nella pagina, inizialmente vuota,
sulla quale è possibile intervenire attraverso apposite istruzioni JavaScript per
“disegnarne” il contenuto. L’estrema flessibilità di questo elemento lo rende adatto
per creare contenuti interattivi, in grado di reagire al comportamento degli utenti.
L’elemento <canvas> può essere utilizzato in qualsiasi posizione della pagina,
dichiarandolo semplicemente all’interno della struttura dei tag:
<!DOCTYPE html>
<html>
<head>
<title>Canvas HTML5</title>
</head>
<body>
<header>
<h1>Canvas HTML5</h1>
</header>
<main>
<canvas></canvas>
</main>
<footer>
<p>Termine del documento</p>
</footer>
</body>
</html>
Nell’esempio viene illustrato un documento molto semplice, con una struttura
lineare, che comprende nella sezione principale il tag <canvas>. Tale elemento sarà
inizialmente un box trasparente di dimensioni di default pari a 300x150 pixel.
Tenete presente che è sempre necessario specificare un id per poter fare
riferimento all’oggetto nel codice JavaScript, e che è possibile definire le
dimensioni da attribuire all’elemento tramite gli attributi width e height:
<canvas id="disegno" width="320" height="180"></canvas>
