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="escomad2"><script language='javascript' src='http://www.ordenador.online/ad/es/2.js'></script></div>
</div>
<div class=contentpage>
<div class=p1>Página anterior: <a class='LinkPrevArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-convertir-un-nodo-a-un-nodo-Regular-jQuery-.html' >Cómo convertir un nodo a un nodo Regular jQuery </a> </div>
<div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-resaltar-una-etiqueta-en-iFrame-Contenido-.html' >Cómo resaltar una etiqueta en iFrame Contenido </a> </div>
</div>
<dl class=xgc>
<dt><span>JavaScript Programación</span></dt>
<dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-el-puntero-del-mouse-Usando-Javascript-.html">Cómo cambiar el puntero del mouse Usando Javascript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-conseguir-un-atributo-de-JavaScript-.html">Cómo conseguir un atributo de JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-codificar-parámetros-en-AJAX-.html">Cómo codificar parámetros en AJAX </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-obtener-el-valor-de-cuadro-combinado-con-JavaScript-.html">Cómo obtener el valor de cuadro combinado con JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-quitar-el-último-hijo-de-una-Div-jQuery-.html">Cómo quitar el último hijo de una Div jQuery </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-actualizar-DIV-.html">Cómo actualizar DIV </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-recuperar-los-datos-de-una-base-de-datos-mediante-Java-Script-.html">Cómo recuperar los datos de una base de datos mediante Java Script </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-comparar-los-objetos-de-fecha-en-JavaScript-.html">Cómo comparar los objetos de fecha en JavaScript </a></dd>
</dl>
</div>
<!--right-->
<div class=rightmain>
<div class=esrightlist>
<div class=e1>Los últimos artículos de equipo</div>
<ul>
<li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-realizar-el-seguimiento-con-la-escritura-de-Java-y-PHP-.html" >Cómo realizar el seguimiento con la escritura de Java y PHP </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-el-campo-de-la-forma-valor-con-JavaScript-.html" >Cómo cambiar el campo de la forma valor con JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-convertir-OS-Grid-para-GPS-.html" >Cómo convertir OS Grid para GPS </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-mostrar-texto-en-Rollover-.html" >Cómo mostrar texto en Rollover </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/¿Qué-es-el-Kit-de-herramientas-de-Adobe-ExtendScript-.html" >¿Qué es el Kit de herramientas de Adobe ExtendScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-utilizar-Ambos-SRC-y-en-línea-en-JavaScript-.html" >Cómo utilizar Ambos SRC y en línea en JavaScript </a> </li>
</ul>
</div>
<div class=esrightlist>
<div class=e1>Artículos de la popular computadora</div>
<ul>
<li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-agregar-cadenas-en-Javascript-.html" >Cómo agregar cadenas en Javascript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-poner-código-JavaScript-en-un-archivo-PHP-.html" >Cómo poner código JavaScript en un archivo PHP </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-depurar-JavaScript-en-Eclipse-.html" >Cómo depurar JavaScript en Eclipse </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Java-Development---página-Script-.html" >Java Development & página Script </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-leer-iFrame-contenido-en-JavaScript-.html" >Cómo leer iFrame contenido en JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Lightbox-Vs---Lightbox-2-.html" >Lightbox Vs . Lightbox 2 </a></li>
</ul>
</div>
<div class="esrightad">
<script language='javascript' src='http://www.ordenador.online/ad/es/r.js'></script>
</div>
<div class=esrightlist>
<div class=e1>Más categorías</div>
<ul>
<li><a href='http://www.ordenador.online/Programacion/C--C-----Programming/' target="_self">C /C + + Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Lenguajes-De-Programación/' target="_self">Lenguajes De Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Delphi-Programación/' target="_self">Delphi Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Programación-Java/' target="_self">Programación Java</a></li>
<li><a href='http://www.ordenador.online/Programacion/JavaScript-Programación/' target="_self">JavaScript Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Programación-PHP--MySQL/' target="_self">Programación PHP /MySQL</a></li>
<li><a href='http://www.ordenador.online/Programacion/Perl-Programming/' target="_self">Perl Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Python-Programming/' target="_self">Python Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Rubí-Programación/' target="_self">Rubí Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Visual-Basics-Programación/' target="_self">Visual Basics Programación</a></li>
</ul>
</div>
</div>
<!--right end-->
<div class="cl"></div>
</div>
<div class=esfoot>
<div class=copy>Conocimientos Informáticos © http://www.ordenador.online</div>
</div>
</body>
</html> 