| Home  | Casa  | Hardware  | Networking  | Programmazione  | Software  | Domanda  | Sistemi  |   
Programmazione  
  • C /C + + Programming

  • Computer Programming Languages

  • Delphi Programming

  • Java Programming

  • Programmazione Javascript

  • PHP /MySQL Programmazione

  • Perl Programming

  • Python Programming

  • rubino Programmazione

  • Nozioni di base di Visual Programming
    		•
    		 
    * Conoscenza Informatica >> Programmazione >> Programmazione Javascript >> Content
    Un tutorial per HTML 5 Canvas Animazione
    Una delle più interessanti caratteristiche sintattiche rilasciati con HTML5 è l'elemento " " . L'elemento crea una superficie di disegno . In molti modi , è equivalente del programmatore della tela del pittore , fornendo un rettangolo vuoto in una pagina Web che può essere scalata a qualsiasi dimensione . JavaScript allora opera come vernice , che consente di disegnare o di animare qualsiasi cosa sulla tela . L' aspetto più impegnativo di creare una tela animazione HTML5 non è capire l'elemento in sé , ma il saper " dipingere " le animazioni JavaScript su di esso . Cose che ti serviranno
    browser Internet di supporto HTML5
    Show More Istruzioni
    1

    Aprire un nuovo documento vuoto e titolo " tele - animation.html . " Apertura il nuovo documento in un'applicazione di sviluppo Web possono essere modificati più facilmente , ma se non si dispone di un solo usare un'applicazione di editing di testo di base .
    2

    Scrivi il codice per definire il documento HTML5 , incluso il doctype , la testa e il corpo del documento . Come nel seguente esempio , impostare il set di caratteri e il titolo nell'intestazione del documento : < ! DOCTYPE html >

    < meta charset = " UTF - 8" /> HTML5 Canvas Animation < /title> < /head> <body> < /body> < /html > . <br> 3 <p> Aggiungi <section> tag e <canvas> al corpo del documento ; . Il tag sezione è nuova in HTML5 . Esso definisce le sezioni nei documenti Web . Il tag canvas definisce la tela rettangolare che si intende utilizzare per costruire la vostra animazione JavaScript . L'esempio seguente ha la "animazione ", ID che verrà utilizzato come riferimento per il tuo JavaScript : <br> <p> <html> < meta charset = " < DOCTYPE html > UTF - 8 " /> <title> HTML5 canvas Animation < /title> < /head> <body> <section> <Canvas id="animation"> < /canvas > < /sezione > < /body> < /html > . <br> 4 <p> Impostare la larghezza e l'altezza della vostra tela e riempire con il testo da visualizzare sul browser che non supportano HTML5 . La tela può essere impostata su qualsiasi dimensione , in base alle esigenze . Ricordate, però, che tele più grandi richiedono più tempo a caricare . Ecco un esempio : < ! DOCTYPE html > <br> <p> <html> <meta charset="UTF-8" /> <title> HTML5 Canvas Animation < /title> < /head> <body> <section> <Canvas id="animation" width="500" height="500"> Siamo spiacenti , il tuo browser non non supporta HTML5 e , a sua volta , non può caricare questa animazione . < /canvas > < /section> < /body> < /html > . <br> 5 <p> " Paint" l'animazione JavaScript sul <canvas> elemento con il metodo " getElementById ( ) " per collegare gli script per la tela ' ID "animazione" . Se non avete esperienza precedente scrittura animazioni JavaScript , ci sono una serie di esempi che si possono provare fornite nella sezione Risorse di questo articolo . <br> <br> <div class=ad2><script language='javascript' src='/ad/201310/4.js'></script></div> </div> </td> </tr> </table> <table width="95%" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#DEE7EE"> <tr> <td></td> </tr> </table> <table width="100%" height="7" border="0" cellpadding="0" cellspacing="0"> <tr> <td></td> </tr> </table> <table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="51%"><p>Previous ： <a class='LinkPrevArticle' href='/Programmazione/javascript-programming/90827.html' >Come tracciare lentamente in Javascript </a></li></p></td> </tr> <tr> <td width="49%"> next ： <a class='LinkNextArticle' href='/Programmazione/javascript-programming/90829.html' >Come per la visualizzazione casuale Javascript Snippets </a></li></td> </tr> </table></td> </tr> </table> <table width="100%" height="7" border="0" cellpadding="0" cellspacing="0"> <tr> <td></td> </tr> </table> <table width="770" height="246" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="375" height="246" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE"> <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm"> Articoli Correlati </td> </tr> </table> <table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4"> <tr> <td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91042.html" title="Come passare una variabile a JavaScript " target="_self">Come passare una variabile a JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91037.html" title="Come stampare con JavaScript " target="_self">Come stampare con JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90995.html" title="Come modificare un URL in una pagina con JavaScript " target="_self">Come modificare un URL in una pagina con JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91063.html" title="Come ottenere il valore della casella combinata con Javascript " target="_self">Come ottenere il valore della casella combinata con Jav…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90746.html" title="IE 8 JavaScript Errore puntatore non valido " target="_self">IE 8 JavaScript Errore puntatore non valido </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90850.html" title="Effetti di opacità in MooTools " target="_self">Effetti di opacità in MooTools </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90829.html" title="Come per la visualizzazione casuale Javascript Snippets " target="_self">Come per la visualizzazione casuale Javascript Snippets…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91110.html" title="Come utilizzare il metodo POST in Window.Open con Java Script " target="_self">Come utilizzare il metodo POST in Window.Open con Java …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91186.html" title="Come attivare la Enter Tutorial chiave in JavaScript " target="_self">Come attivare la Enter Tutorial chiave in JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90773.html" title="JavaScript Vs . VBScript " target="_self">JavaScript Vs . VBScript </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> <td width="20" valign="top"></td> <td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE"> <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm">Articoli in evidenza </td> </tr> </table> <table width="95%" height="207" border="0" align="center" cellpadding="0" cellspacing="4"> <tr> <td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/visual-basics-programming/96208.html" title="Come imparare Visual Basic 2008 " target="_self">Come imparare Visual Basic 2008 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/visual-basics-programming/95548.html" title="Come scrivere uno script in VB " target="_self">Come scrivere uno script in VB </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/visual-basics-programming/95794.html" title="Come fare una galleria di immagini in Visual Basic 6.0 " target="_self">Come fare una galleria di immagini in Visual Basic 6.0 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/php-mysql-programming/92452.html" title="Come rimuovere il carattere di invio da PHP " target="_self">Come rimuovere il carattere di invio da PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/87516.html" title="A proposito del linguaggio Cobol " target="_self">A proposito del linguaggio Cobol </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/87623.html" title="Come utilizzare l'elemento SPAN Con Incorpora CSS " target="_self">Come utilizzare l'elemento SPAN Con Incorpora CSS </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/visual-basics-programming/94981.html" title="Come cambiare sfondo del desktop con VB.NET " target="_self">Come cambiare sfondo del desktop con VB.NET </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/cc-programming/85828.html" title="Come collegare C # per MS Excel " target="_self">Come collegare C # per MS Excel </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/php-mysql-programming/91812.html" title="Come recuperare una struttura di tabella MySQL in PHP " target="_self">Come recuperare una struttura di tabella MySQL in PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/visual-basics-programming/94770.html" title="Come creare un modulo vuoto con scorrimento Uso VB6 " target="_self">Come creare un modulo vuoto con scorrimento Uso VB6 </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> <table width="980" height="8" border="0" cellpadding="0" cellspacing="0"> <tr> <td></td> </tr> </table> <table border=0 cellSpacing=0 cellPadding=0 width=980 bgColor=#36506e height=90> <tr> <td class=bs height=90 align=middle>Copyright © Conoscenza Informatica http://it.wingwit.com <script language='javascript' src='/ad/201310/1.js'></script></td> </tr> </table> </div> </body> </html>