|
|
|
| Come disegnare un albero utilizzando una tela in Javascript |
|
Javascript è un linguaggio di programmazione popolare usato per creare degli script lato client per essere implementato in un sito web. È un linguaggio versatile che può essere utilizzato per sviluppare siti web dinamici con interfacce utente avanzate e interattive . Il codice HTML recentemente rilasciato 5 ha introdotto l'elemento canvas , un componente che può essere utilizzato per il rendering 2D figure e immagini bitmap . JavaScript può essere utilizzato per disegnare un oggetto, come ad esempio un albero , usando l'elemento canvas . Istruzioni 1 Aprire il browser web preferito e navigare a " codediesel.com /javascript /disegno - albero - di - tela ". Clicca su "Download Source" collegamento e salvare l'archivio sul disco rigido . Fai clic destro su l'archivio , selezionare "Estrai tutto" dal menu visualizzato , selezionare la cartella in cui si estrarre il contenuto dell'archivio .
2 Aprire un editor di testo , come ad esempio Blocco note o WordPad , per avviare la creazione di una nuova pagina web HTML
3 Inizia la pagina nel modo consueto , inserendo queste righe : .
< head>
4 Lascia la tua pagina un titolo utilizzando il titolo
5
JavaScript Albero tela < /title> <br> <p> È possibile sostituire " Albero Canvas JavaScript" con qualunque altro titolo < : tag , come questo . p > Definire e caricare lo script inserendo questa riga : <br> <p> <script type='text/javascript' src='algoTree.js'> < /script> <br> <p> " , algoTree.js " è uno script sviluppato per aiutare a disegnare alberi utilizzando il codice HTML 5 tela <br> 6 <p> Fine del . " " sezione e avviare il " capo sezione del corpo " della pagina HTML da l'inserimento di queste due linee : <br> <p> < /head> <body> <br> 7 <p> definire l' elemento canvas e il tipo di script utilizzando queste due righe : <br> <p> <Canvas id="canvas"> < /canvas > <script type="application/javascript"> <br> 8 <p> definire la larghezza e l'altezza del nuovo albero e assegnare alla tela con l'inserimento di queste due linee : <br> <p> var altezza = 300 , width = 300 ; var canvas = document.getElementById ( ' tela '); canvas.height = altezza; canvas.width = larghezza ; <br> <p> sostituire i due valori "300" con le dimensioni che si desidera il vostro albero di avere <br> 9 <p> Definire l'albero come un oggetto 3D con l'aggiunta di questa riga : . <br> < p > ctx = canvas.getContext ( "2D" ) ; <br> 10 <p> Disegna l'albero utilizzando il metodo " tree.draw " , in questo modo: <br> <p> tree.draw ( CTX , altezza, larghezza ) ; <br> <p> È possibile rendere l'albero più complesso utilizzando il parametro "' spread" ( con valori compresi tra 0,3 e 0,9) . È inoltre possibile utilizzare la "mostra foglie = false " parametro per disegnare l'albero senza foglie. Per modificare il tipo di foglie , utilizzare il parametro " Tipo di foglie " (può essere impostato per tree.SMALL_LEAVES , tree.MEDIUM_LEAVES , tree.BIG_LEAVES e tree.THIN_LEAVES ) . Ecco come il comando completo è: <br> <p> tree.draw ( CTX , altezza, larghezza , dislocate = 0.5, mostrano foglie = true , le foglie di tipo = tree.BIG_LEAVES ) ; <br> 11 < p > Fine della " sceneggiatura", "corpo" e "sezioni html " sono inserite le seguenti righe: <br> <p> < /script> < /body> < /html > <br> <br> 12 <p> Verificare il codice di eventuali errori . A questo punto , il documento si presenta così : <br> <p> <html> < meta http-equiv = contenuto "Content-Type " = "text /html ; charset = UTF -8 " ,> <title> JavaScript Albero tela < /title> <script type='text/javascript' src='algoTree.js'> < /script> < /head> <body> < tela id = " tela " > < /canvas > <script type="application/javascript"> var height = 300 , width = 300 ; var canvas = document.getElementById ( ' tela '); canvas.height = altezza; canvas.width = larghezza ; ctx = canvas.getContext ( "2D" ) ; tree.draw ( CTX , altezza, larghezza , si sviluppa = 0.5 , mostrano foglie = true , lascia type = tree.BIG_LEAVES ) ; < /script> < /body> < /html > <br> 13 <p> Selezionare per salvare il file di testo e digitare " . html " nella casella "Nome file" , dopo il nome del pagina web , per salvare il documento come file HTML . Salvarlo nella cartella dove avete estratto il contenuto dell'archivio. Il " algoTree.js " si trova in quella cartella . <br> 14 <p> Carica il file HTML e lo script " algoTree.js " a un host web e testare la pagina web . <br> < 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/90754.html' >Come convertire un nodo regolare a un nodo jQuery </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programmazione/javascript-programming/90756.html' >Come Evidenziare un Tag in iFrame contenuto </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/90929.html" title="Come aggiungere un ingresso Casella di controllo con javascript " target="_self">Come aggiungere un ingresso Casella di controllo con ja…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90866.html" title="Come dividere un URL lungo in 2 " target="_self">Come dividere un URL lungo in 2 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91046.html" title="Come usare le espressioni regolari con Javascript " target="_self">Come usare le espressioni regolari con Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90991.html" title="Come controllare i margini in un JavaScript " target="_self">Come controllare i margini in un JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90909.html" title="Come rimuovere i caratteri Minus & Plus in Javascript " target="_self">Come rimuovere i caratteri Minus & Plus in Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90790.html" title="Cos'è un file AXD " target="_self">Cos'è un file AXD </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90828.html" title="Un tutorial per HTML 5 Canvas Animazione " target="_self">Un tutorial per HTML 5 Canvas Animazione </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91241.html" title="Come smettere di errore Messaggio Null è null o non un oggetto " target="_self">Come smettere di errore Messaggio Null è null o non un…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90802.html" title="Come utilizzare Google Maps API di completamento automatico Località Campi " target="_self">Come utilizzare Google Maps API di completamento automa…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90799.html" title="Calcoli JavaScript con Punti decimali " target="_self">Calcoli JavaScript con Punti decimali </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/computer-programming-languages/86417.html" title="Come leggere i caratteri in MIPS " target="_self">Come leggere i caratteri in MIPS </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/php-mysql-programming/91686.html" title="Come evitare il tipo di join Tutto in MySQL " target="_self">Come evitare il tipo di join Tutto in MySQL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/java-programming/89857.html" title="Come in multitasking con Java " target="_self">Come in multitasking con Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/cc-programming/86007.html" title="Come costruire un driver di dispositivo " target="_self">Come costruire un driver di dispositivo </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/perl-programming/93267.html" title="Come eseguire Perl Da PowerShell " target="_self">Come eseguire Perl Da PowerShell </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88366.html" title="Come reimpostare la password di amministratore di Novell " target="_self">Come reimpostare la password di amministratore di Novel…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/java-programming/89849.html" title="Come creare una finestra di messaggio in un thread separato in Java " target="_self">Come creare una finestra di messaggio in un thread sepa…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/visual-basics-programming/95882.html" title="Come catturare una schermata in VB " target="_self">Come catturare una schermata in VB </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/87577.html" title="Come scrivere DIV Tags " target="_self">Come scrivere DIV Tags </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/cc-programming/85900.html" title="Come utilizzare un Data Base Picker con GridView " target="_self">Come utilizzare un Data Base Picker con GridView </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> | | |
