|
|
|
| Cómo dibujar un árbol Con un lienzo en JavaScript |
|
JavaScript es un lenguaje de programación popular usado para crear secuencias de comandos del lado del cliente para ser implementado en una página web . Es un lenguaje versátil que puede ser utilizado para desarrollar páginas web dinámicas con interfaces de usuario mejoradas y interactiva . El recientemente lanzado HTML 5 introduce el elemento canvas , un componente que puede ser utilizado para hacer formas 2D y las imágenes de mapa de bits . JavaScript se puede utilizar para dibujar un objeto , como un árbol, con el elemento canvas . Instrucciones 1 Abra su navegador web y vaya a " codediesel.com /javascript /dibujo - árboles - en -lona . " Haga clic en el enlace " Fuente Descargar " y guarde el archivo en la unidad de disco duro. Haga clic derecho en el archivo, seleccionando "Extraer todo" en el menú que aparece y seleccione la carpeta en la que va a extraer el contenido del archivo.
2 Abra un editor de texto, como el Bloc de notas o WordPad, para iniciar la creación de una nueva página web HTML
3 Comienza la página de la forma habitual , mediante la inserción de estas líneas: .
< head>
4 Dar su página un título con el título etiqueta, así: .
JavaScript Tree Canvas < /title > <br> <p> puede sustituir " Tree JavaScript Canvas " con cualquier otro título <br> 5 < p> Definir y cargar la secuencia de comandos mediante la inserción de esta línea: <br> <p> Messenger type='text/javascript' src='algoTree.js'> < /script > <br> <p> " ; algoTree.js " es un script desarrollado para ayudarle a dibujar árboles utilizando el HTML 5 lienzo <br> 6 <p> End . " " sección e iniciar el " jefe de sección del cuerpo " de la página HTML la inserción de estas dos líneas : <br> <p> < /head> <body> <br> 7 <p> definir el elemento canvas y el tipo de secuencia de comandos con estas dos líneas : <br> <p> <canvas id="canvas"> </canvas > Messenger type="application/javascript"> <br> 8 <p> Definir la anchura y altura de su nuevo árbol y asignar al lienzo mediante la inserción de estas dos líneas : <br> <p> var altura = 300 , width = 300 ; var canvas = document.getElementById ( ' canvas '); canvas.height = altura ; canvas.width = ancho ; <br> <p> Reemplace los dos valores " 300 " con las dimensiones que desee el árbol tenga <br> 9 <p> Definir el árbol como un objeto 3D , añadiendo esta línea: . <br> < p > ctx = canvas.getContext ( "2d "); <br> 10 <p> Dibujar el árbol utilizando el método " tree.draw " , así: <br> <p> tree.draw ( ctx , alto, ancho ) ; <br> <p> Puede hacer que el árbol más complejo con el parámetro " " spread " ( con valores entre 0,3 y 0,9 ) . También puede utilizar la opción "Mostrar hojas = false" parámetro para dibujar el árbol sin las hojas. Para cambiar el tipo de hojas , utilice el parámetro " hojas tipo " ( se puede configurar para tree.SMALL_LEAVES , tree.MEDIUM_LEAVES , tree.BIG_LEAVES y tree.THIN_LEAVES ) . Así es como el comando completo se ve así: <br> <p> tree.draw ( ctx , altura , anchura, repartidas = 0.5 , muestran hojas = true , deja type = tree.BIG_LEAVES ) ; <br> 11 < p > Fin del " guión", "cuerpo" y "secciones html " mediante la inserción de estas líneas : <br> <p> < /script> < /body> < /html > <br> <br> 12 <p> Verifique el código de los errores . En este punto, el documento es la siguiente: <br> <p> html head < meta http -equiv = contenido " Content-Type " = "text /html ; charset = UTF - 8 " ; > <title> JavaScript Tree Canvas < /title> <script type='text/javascript' src='algoTree.js'> < /script> < /head> <body> < canvas id = "lienzo "> </canvas > Messenger type="application/javascript"> var altura = 300 , width = 300 ; var canvas = document.getElementById ( ' canvas '); canvas.height = altura ; canvas.width = ancho ; ctx = canvas.getContext ( "2d "); tree.draw ( ctx , altura, anchura , se extendió = 0.5 , muestran hojas = true , deja type = tree.BIG_LEAVES ) ; < /script> < /body> < /html> <br> 13 <p> Seleccionar para guardar el archivo de texto y escribir " . html" en el cuadro " nombre de archivo" , después de que el nombre de su página web, para guardar el documento como un archivo HTML. Guárdelo en la carpeta en la que extrajo el contenido del archivo . El " algoTree.js " se encuentra en esa carpeta. <br> 14 <p> Cargar el archivo HTML y la secuencia de comandos " algoTree.js " a un servidor web y probar la página 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='/Programacion/javascript-programming/90754.html' >Cómo convertir un nodo a un nodo Regular jQuery </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programacion/javascript-programming/90756.html' >Cómo resaltar una etiqueta en iFrame Contenido </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"> Artículos relacionados </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="/Programacion/javascript-programming/90773.html" title="JavaScript Vs . VBScript " target="_self">JavaScript Vs . VBScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90776.html" title="¿Por qué mi Javascript Mostrar Void " target="_self">¿Por qué mi Javascript Mostrar Void </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90931.html" title="Cómo incrustar vídeos en un pop-up con JavaScript " target="_self">Cómo incrustar vídeos en un pop-up con JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90850.html" title="Efectos de opacidad en MooTools " target="_self">Efectos de opacidad en MooTools </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91089.html" title="Cómo activar el JavaScript para una UTStarcom CDM- 7126 " target="_self">Cómo activar el JavaScript para una UTStarcom CDM- 712…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90796.html" title="Cómo Graficar Con jQuery " target="_self">Cómo Graficar Con jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90979.html" title="Cómo determinar si un sitio utiliza JavaScript redirecciones " target="_self">Cómo determinar si un sitio utiliza JavaScript redirec…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90842.html" title="JavaScript: redirección a la página " target="_self">JavaScript: redirección a la página </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90829.html" title="Cómo mostrar aleatoria fragmentos de Javascript " target="_self">Cómo mostrar aleatoria fragmentos de Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90927.html" title="Cómo ocultar un DIV en una devolución de datos en JavaScript " target="_self">Cómo ocultar un DIV en una devolución de datos en Jav…</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">Artículos destacados </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="/Programacion/visual-basics-programming/95019.html" title="Cómo quitar Devoluciones carácter de una cadena Dentro VB " target="_self">Cómo quitar Devoluciones carácter de una cadena Dentr…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/87589.html" title="Cómo llamar a una función en QBasic " target="_self">Cómo llamar a una función en QBasic </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/perl-programming/93195.html" title="Cómo mantener una ventana enfocada en Perl /Tk " target="_self">Cómo mantener una ventana enfocada en Perl /Tk </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/89589.html" title="Cómo escribir Android 1.1 SDK de código " target="_self">Cómo escribir Android 1.1 SDK de código </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/94948.html" title="Tipos de cuadros de entrada en VBA " target="_self">Tipos de cuadros de entrada en VBA </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/87388.html" title="Cómo insertar palabras que contienen apóstrofes en SQL " target="_self">Cómo insertar palabras que contienen apóstrofes en SQ…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/perl-programming/93297.html" title="Cómo obtener la diferencia de dos fechas en Perl " target="_self">Cómo obtener la diferencia de dos fechas en Perl </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/91549.html" title="Cómo crear una lista desplegable Usar XML y AJAX en PHP " target="_self">Cómo crear una lista desplegable Usar XML y AJAX en PH…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/94372.html" title="Cómo agregar una marca de agua a BMP con VBA " target="_self">Cómo agregar una marca de agua a BMP con VBA </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/96056.html" title="Cómo validar una dirección de correo en VB " target="_self">Cómo validar una dirección de correo en VB </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 © Conocimientos Informáticos http://ordenador.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html>
| | |
