August 20
Una delle più interessanti caratteristiche sintattiche rilasciati con HTML5 è il "<canvas>" elemento. L'elemento <canvas> crea una superficie di disegno. In molti modi, è equivalente del programmatore della tela del pittore, fornendo un rettangolo vuoto su una pagina Web che può essere scalata a qualsiasi dimensione. JavaScript funziona quindi come vernice, consentendo di disegnare o animare qualsiasi cosa sulla tela. L'aspetto più impegnativo di creare un'animazione tela HTML5 non è la comprensione del <canvas> dell'elemento stesso, ma saper "dipingere" le animazioni JavaScript su di esso.
1 Aprire un nuovo documento vuoto e titolo "tela-animation.html." Aprendo il nuovo documento in un'applicazione di sviluppo Web può rendere più semplice l'editing, ma se non si dispone di un solo usare un editor di testo di base.
2 Scrivere il codice per definire il documento HTML5, incluso il doctype, testa e il corpo del documento. Come nel seguente esempio, impostare il set di caratteri e il titolo nell'intestazione del documento:
<! DOCTYPE html>
<Html>
<Head>
<meta charset="UTF-8" />
<title>HTML5 Canvas Animation</title>
</ Head>
<Body>
</ Body>
</ Html>.
3 Aggiungere <section> e <canvas> tag per il corpo del documento. Il tag sezione è nuova in HTML5. Esso definisce le sezioni in un documento Web. Il tag canvas definisce la tela rettangolare che verrà utilizzato per costruire l'animazione JavaScript. Il seguente esempio ha il "animazione" ID che verrà utilizzato come riferimento dal JavaScript:
<! DOCTYPE html>
<Html>
<Head>
<meta charset="UTF-8" />
<title>HTML5 Canvas Animation</title>
</ Head>
<Body>
<section>
<canvas id="animation"></canvas>
</section>
</ Body>
</ Html>.
4 Impostare la larghezza e l'altezza della vostra tela e riempirlo con il testo da visualizzare sul browser che non supportano HTML5. La tela può essere impostata a qualsiasi dimensione, a seconda delle esigenze. Ricordate, tuttavia, che le tele più grandi impiegano più tempo a caricare. Ecco un esempio:
<! DOCTYPE html>
<Html>
<Head>
<meta charset="UTF-8" />
<title>HTML5 Canvas Animation</title>
</ Head>
<Body>
<section>
<canvas id="animation" width="500" height="500">
Sorry, your browser doesn't not support HTML5 and, in turn, cannot load this animation.
</canvas>
</section>
</ Body>
</ Html>.
5 "Paint" l'animazione JavaScript sull'elemento <canvas> con il metodo "getElementById ()" per collegare gli script per la tela ' "animazione" ID. Se non si dispone di una precedente esperienza di scrittura animazioni JavaScript, ci sono una serie di esempi che potete provare forniti nella sezione Risorse di questo articolo.