JavaScript Draw is een populaire programmeertaal gebruikt voor client - side scripts maken in een website worden uitgevoerd . Het is een veelzijdig taal die kan worden gebruikt om dynamische websites te ontwikkelen met verbeterde interactieve gebruikersinterfaces . De onlangs vrijgegeven HTML 5 introduceerde het canvas element , een onderdeel dat kan worden gebruikt om 2D-vormen en bitmapafbeeldingen maken . JavaScript kan worden gebruikt om een object te tekenen , zoals een boom , met het doek element . Instructies
1 Open uw favoriete webbrowser en navigeer naar " codediesel.com /javascript /tekening - bomen - in - canvas. " Klik op de " Source Download " link en sla het archief op uw harde schijf . Klik met de rechtermuisknop op het archief , kies " Alles uitpakken " in het verschenen menu en selecteer een map aan waar je de inhoud van het archief uit te pakken . Kopen van 2 Open een teksteditor , zoals kladblok of WordPad , om te beginnen met het creëren van een nieuwe HTML- webpagina
3 Start de pagina op de gebruikelijke wijze , door het invoegen van deze lijnen : .
< head >
4 Geef je pagina een titel met behulp van de titel tag , zoals dit: . JavaScript canvas Boom <br> < /title > <br> <p> U kunt " JavaScript canvas Boom " te vervangen door een andere titel <br> 5 <p > Definieer en laad het script door het invoegen van deze regel : <br> <p> <script type='text/javascript' src='algoTree.js'> < /script > <br> <p> " , algoTree.js " is een script ontwikkeld om u te helpen bomen met behulp van de HTML 5 canvas trekken <br> <p> End 6 de . ' ' sectie en start de" head sectie body " van de HTML- pagina door invoegen van deze twee lijnen : <br> <p> < /head > <body> <br> 7 <p> Definieer het canvas -element en het type script met behulp van deze twee lijnen : <br> <p> <canvas id="canvas"> < /canvas > <script type="application/javascript"> <br> 8 <p> Definieer de breedte en hoogte van uw nieuwe boom en toewijzen het op het doek door het invoegen van deze twee lijnen : <p> var height <br> = 300 , width = 300 ; var canvas = document.getElementById ( ' canvas ' ) ; canvas.height = hoogte ; canvas.width = breedte ; < br > <p> Vervang de twee " 300 " waarden met de afmetingen u wilt uw boom te hebben <br> 9 <p> als een 3D-object Definieer de boom door het toevoegen van deze regel: . <br> <p > ctx = canvas.getContext ( " 2d " ) ; <br> 10 <p> Teken de boom met behulp van de " tree.draw " -methode , zoals deze : <p> tree.draw <br> ( CTX , hoogte, breedte ) ; <br> <p> U kunt de boom complexer door met de parameter " " spread " ( met waarden tussen 0,3 en 0,9 ) te maken . U kunt ook gebruik maken van de "toon bladeren = false " parameter om de boom te trekken , zonder de bladeren . Om de aard van de bladeren te veranderen , gebruikt u de parameter " bladeren type" ( kan worden ingesteld op tree.SMALL_LEAVES , tree.MEDIUM_LEAVES , tree.BIG_LEAVES en tree.THIN_LEAVES ) . Hier is hoe het volledige commando ziet er als volgt uit: <p> tree.draw <br> ( CTX , hoogte, breedte , verspreid = 0.5 , tonen bladeren = true , laat type = tree.BIG_LEAVES ) ; <br> 11 <p > Beëindig " script ", " body " en " html " secties door het invoegen van deze lijnen : <br> <p> < /script > < /body > < /html > <br> < br > 12 <p> Controleer de code voor eventuele fouten . Op dit punt, uw document ziet er als volgt uit: <br> <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 Boom < /title > <script type='text/javascript' src='algoTree.js'> < /script > < /head > <body> < canvas id = "canvas " > < /canvas > <script type="application/javascript"> var height = 300 , width = 300 ; var canvas = document.getElementById ( ' canvas ' ) ; canvas.height = hoogte ; canvas.width = width ; ctx = canvas.getContext ( " 2d " ) ; tree.draw ( CTX , hoogte, breedte , verspreid = 0.5 , tonen bladeren = true , laat type = tree.BIG_LEAVES ) ; < /script > < /body > < /html > <br> 13 <p> Selecteer het tekstbestand en type " . html " opslaan in het vak " Bestandsnaam " , naar de naam van uw webpagina , het document opslaan als een HTML-bestand . Sla het op in de map waarin u de inhoud van het archief gehaald . De " algoTree.js " ligt in die map . <br> 14 <p> Upload het HTML-bestand en de " algoTree.js " script naar een webhost en test de webpagina . <br> < Br > <br></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td bgColor=#e7edf4 align=middle><script language='javascript' src='/ad/201310/3.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td align=left>Previous: <a class='LinkPrevArticle' href='/programmering/javascript-programming/201309/90754.html' >Hoe maak je een reguliere Node converteren naar een jQuery Node </a></li> </td>
<td align=right>Next: <a class='LinkNextArticle' href='/programmering/javascript-programming/201309/90756.html' >Hoe maak je een Tag in iFrame Content Markeer </a></li> </td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=18>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=246>
<tr>
<td height=246 vAlign=top width=199>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=199>
<tr>
<td height=244 vAlign=top width=197>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>JavaScript Programmeren</STRONG></td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91238.html" title="Hoe te Waarden in XML Met JavaScript Verander " target="_self">Hoe te Waarden in XML Met Java…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90992.html" title="Hoe maak je een DIV Zichtbaar met een Scroll in JavaScript maken " target="_self">Hoe maak je een DIV Zichtbaar …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91167.html" title="Hoe je Java Script leren " target="_self">Hoe je Java Script leren </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90981.html" title="Hoe kan ik een variabele lengte in Javascript Beperk " target="_self">Hoe kan ik een variabele lengt…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90833.html" title="Hoe je code met behulp van de Script Editor in LiveCycle " target="_self">Hoe je code met behulp van de …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90790.html" title="Wat is een AXD -bestand? " target="_self">Wat is een AXD -bestand? </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91156.html" title="Wat is de Adobe ExtendScript Toolkit ? " target="_self">Wat is de Adobe ExtendScript T…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90828.html" title="Een tutorial voor HTML 5 Canvas Animatie " target="_self">Een tutorial voor HTML 5 Canva…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90968.html" title="Hoe de adresbalk in JavaScript Verander " target="_self">Hoe de adresbalk in JavaScript…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
<td vAlign=top width=12></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<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>Related Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<tr>
<td height=201 width="33%"><IMG src="/img_xby/n1.jpg" width=111 height=182></td>
<td width="67%"><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96568.html' target="_self">Hoe maak je een Combo Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96567.html' target="_self">Hoe maak je een Check Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96566.html' target="_self">Hoe maak je een tekstvak maken in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96565.html' target="_self">Hoe maak je een optie Box in Visual Basi…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96564.html' target="_self">Hoe maak je een schijf keuzelijst in Vis…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96563.html' target="_self">Hoe kan ik een keuzelijst maken in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96562.html' target="_self">Hoe kan ik een Picture Box Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96561.html' target="_self">Hoe een bestand keuzelijst Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96560.html' target="_self">Hoe kan ik een afbeelding Box Maak in Vi…</a><br></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=8></td>
<td vAlign=top width=376>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<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>Programmering Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<tr>
<td height=199 width="33%"><IMG src="/img_xby/n2.jpg" width=111 height=182></td>
<td width="67%">
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/91714.html" title="Hoe de waarde van een keuzelijst met andere keuzelijst in PHP " target="_self">Hoe de waarde van een keuzelijst met and…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/94999.html" title="Hoe te Waarden invoegen Van Microsoft Word een Database " target="_self">Hoe te Waarden invoegen Van Microsoft Wo…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/86778.html" title="Hoe de ClientID in ASP Krijg " target="_self">Hoe de ClientID in ASP Krijg </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/95479.html" title="Hoe te gebruiken Access 2007 VBA naar stap door & Controle Fields " target="_self">Hoe te gebruiken Access 2007 VBA naar st…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87957.html" title="Hoe schrijf je een Trainzscript TS2010 " target="_self">Hoe schrijf je een Trainzscript TS2010 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/91290.html" title="Hoe je twee Strings Join in PHP " target="_self">Hoe je twee Strings Join in PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/92806.html" title="PHP Web Design Tutorial " target="_self">PHP Web Design Tutorial </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87872.html" title="Wat zijn Cue Bestanden en Bin -bestanden? " target="_self">Wat zijn Cue Bestanden en Bin -bestanden…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/89848.html" title="Wat is een Java Bean " target="_self">Wat is een Java Bean </a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=57>
<tr>
<td class=bs background=/img_xby/di.jpg align=center>Copyright © Computer Kennis http://www.nldit.com <script language='javascript' src='/ad/201310/5.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>
|
