|
|
|
| Hvordan tegne et tre ved hjelp av en magnet på JavaScript |
|
JavaScript er et populært programmeringsspråk som brukes til å lage klient - side skript for å bli implementert i en nettside. Det er en allsidig språk som kan brukes til å utvikle dynamiske nettsider med forbedrede og interaktive brukergrensesnitt . Den nylig utgitte HTML 5 introduserte lerretet element , en komponent som kan brukes til å gjengi 2D former og bitmap bilder . JavaScript kan brukes til å trekke en gjenstand , slik som et tre , ved hjelp av lerretet element . Instruksjoner en Åpne din favoritt nettleser og gå til " codediesel.com /javascript /tegning - trær -i- lerret. " Klikk på "Last ned Source " linken og lagre arkivet på harddisken . Høyreklikk på arkivet , velg " Pakk ut alle " fra menyen som vises , og velg en mappe du vil pakke ut innholdet i arkivet .
2 Åpne en teksteditor , for eksempel Notepad eller WordPad , for å begynne å lage en ny HTML- webside
3 start side på vanlig måte , ved å sette inn disse linjene : .
< head>
4 Gi siden et navn ved å bruke tittelen tag , slik: .
JavaScript Canvas Tre < /title > <br> <p> Du kan erstatte " JavaScript Canvas Tree" med alle andre titler <br> 5 < p> Definer og laste manuset ved å sette inn denne linjen : en <p> <script type='text/javascript' src='algoTree.js'> < /script > <br> <p> " ; algoTree.js " er et script utviklet for å hjelpe deg med å tegne trær ved hjelp av HTML 5 canvas <br> 6 <p> Avslutt . " head "-seksjonen og start " body "-delen av HTML-siden av sette inn disse to linjene : <br> <p> < /head> <body> <br> 7 <p> Definer lerretet element og scriptet type ved hjelp av disse to linjene : <br> <p> <canvas id="canvas"> < /lerret > <script type="application/javascript"> <br> 8 <p> Definer bredden og høyden på det nye treet og tilordne det til lerretet ved å sette inn disse to linjene : <br> <p> Var høyde = 300 , width = 300 , Div. lerret = document.getElementById (' canvas '); canvas.height = høyde ; canvas.width = bredde; <br> <p> Erstatt de to " 300 " verdier med dimensjonene du vil at treet skal ha <br> 9 <p> Definer treet som et 3D-objekt ved å legge denne linjen : . <br> < p > ctx = canvas.getContext ( " 2d "); <br> 10 <p> Tegn treet ved hjelp av " tree.draw "-metoden , som dette : en <p> tree.draw ( ctx , høyde , bredde ) ; <br> <p> Du kan få treet mer komplisert ved å bruke " 'spread " parameter (med verdier mellom 0,3 og 0,9) . Du kan også bruke "show blader = false " parameter for å trekke tre uten blader . For å endre type blader, bruke " blader type" parameter ( kan settes til tree.SMALL_LEAVES , tree.MEDIUM_LEAVES , tree.BIG_LEAVES og tree.THIN_LEAVES ) . Her er hvordan full kommando ser ut som : en <p> tree.draw ( ctx , høyde , bredde , fordelt = 0,5 , viser blader = true , etterlater type = tree.BIG_LEAVES ) ; <br> 11 < p > Slutt på " script ", " kropp" og " html " seksjoner ved å sette disse linjene : <br> <p> < /script > < /body > < /html > <br> <br> 12 <p> Bekreft koden for eventuelle feil . På dette punktet , ser dokumentet slik ut : en <p> <html> <head><meta name=viewport content="width=device-width, initial-scale=1.0"> < meta http - equiv = " Content -Type " content = "text /html ; charset = UTF - 8 " ; > <title> JavaScript Canvas Tre < /title> <script type='text/javascript' src='algoTree.js'> < /script > < /head> <body> < lerret id = "lerret "> < /lerret > <script type="application/javascript"> Var height = 300 , width = 300 , Div. lerret = document.getElementById (' canvas '); canvas.height = høyde ; canvas.width = bredde; ctx = canvas.getContext ( " 2d "); tree.draw ( ctx , høyde , bredde , fordelt = 0,5, viser blader = true , etterlater type = tree.BIG_LEAVES ); < /script > < /body > < /html > <br> 13 <p> Velg å lagre tekstfilen og skriv " . html " i " File name "-boksen , etter navnet på din webside, for å lagre dokumentet som en HTML -fil . Lagre den til mappen hvor du pakket ut innholdet i arkivet . Den " algoTree.js " ligger i denne mappen. <br> 14 <p> Last HTML-filen og " algoTree.js " script til en web-vert og teste websiden. <br> <Br > <br>
<div class=ad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</td>
</tr>
</table>
<table width="745" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ecf0f4">
<tr>
<td bgcolor="#ecf0f4"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="7">
<tr>
<td></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="95%" align="center" height="26">
<tr>
<td width="51%"><p>früher ： <a class='LinkPrevArticle' href='http://www.datamaskin.biz/Programmering/javascript-programming/90754.html' >Slik konverterer en vanlig Node til en jQuery Node </a></li></p></td>
</tr>
<tr>
<td width="49%"> Weiter： <a class='LinkNextArticle' href='http://www.datamaskin.biz/Programmering/javascript-programming/90756.html' >Hvordan Merk en Tag i iFrame innhold </a></li></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="7">
<tr>
<td></td>
</tr>
</table></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" height=7>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=770 align=center height=246>
<tr>
<td height=246 vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=380>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><strong>Relatert Artike</strong></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<tr>
<td height=201>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91022.html" title="Hvordan Sammenlign Dato objekter i JavaScript " target="_self">Hvordan Sammenlign Dato objekter i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90794.html" title="JavaScript som en server-side kode for Apache " target="_self">JavaScript som en server-side kode for Apache </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91035.html" title="Hvordan Inverter Boolsk verdi i JavaScript " target="_self">Hvordan Inverter Boolsk verdi i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90830.html" title="Hvordan legge til Analytics til LightBox " target="_self">Hvordan legge til Analytics til LightBox </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90919.html" title="Hvordan lage Java Script for Looping Pictures " target="_self">Hvordan lage Java Script for Looping Pictures </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90850.html" title="Opacity Effekter i MooTools " target="_self">Opacity Effekter i MooTools </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90807.html" title="Hvordan lage en Bouncing Ball animasjon i HTML " target="_self">Hvordan lage en Bouncing Ball animasjon i HTML </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91280.html" title="Hvordan lage en JavaScript Sykling Banner " target="_self">Hvordan lage en JavaScript Sykling Banner </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90968.html" title="Hvordan endre adresselinjen i JavaScript " target="_self">Hvordan endre adresselinjen i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90860.html" title="Hvordan lage en link Bounce Med jQuery " target="_self">Hvordan lage en link Bounce Med jQuery </a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=20></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=380>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><strong>Anbefalte artikler </strong></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<tr>
<td height=199>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/perl-programming/93213.html" title="Hvordan lese fra DOSBox i Perl " target="_self">Hvordan lese fra DOSBox i Perl </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/96126.html" title="Hvordan lage en Proxy klikkertrening i VB 6 " target="_self">Hvordan lage en Proxy klikkertrening i VB 6 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/java-programming/90087.html" title="Kvaliteter av en god Java Developer for Trading Systems " target="_self">Kvaliteter av en god Java Developer for Trading Systems…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/cc-programming/86006.html" title="Slik konverterer QString til Int " target="_self">Slik konverterer QString til Int </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/php-mysql-programming/92376.html" title="Slik fjerner Delstrenger i MySQL " target="_self">Slik fjerner Delstrenger i MySQL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/java-programming/89711.html" title="Hvordan finne ut om en skrift er monospaced i Java " target="_self">Hvordan finne ut om en skrift er monospaced i Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/96159.html" title="Hvordan Kast et objekt i Visual Basic 6 " target="_self">Hvordan Kast et objekt i Visual Basic 6 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/python-programming/93796.html" title="Python sorteringsfunksjonen " target="_self">Python sorteringsfunksjonen </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/computer-programming-languages/88555.html" title="Hvordan bruke VBA til å flytte data fra Excel til Word " target="_self">Hvordan bruke VBA til å flytte data fra Excel til Word…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/ruby-programming/94180.html" title="Hvordan installere CentOS Ruby on Rails for 1.9.2 Apache " target="_self">Hvordan installere CentOS Ruby on Rails for 1.9.2 Apach…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=980 height=8>
<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=center>Copyright © Datamaskin http://www.datamaskin.biz/
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html> | | |
