“Conocimientos Programación>JavaScript Programación

Un Tutorial de HTML 5 Animación Canvas

2015/6/24
Uno de los rasgos sintácticos más interesantes publicados con HTML5 es el elemento " " . El elemento crea una superficie de dibujo . En muchos sentidos , es equivalente a la del programador de la tela del pintor , proporcionando un cuadro en blanco en una página Web que se puede escalar a cualquier tamaño . JavaScript funciona entonces como la pintura , lo que le permite dibujar o animar cualquier cosa en el lienzo. El aspecto más difícil de crear una animación canvas HTML5 no está entendiendo el elemento sí mismo, pero sabiendo cómo " pintar " animaciones de JavaScript en la parte superior de la misma. Cosas que necesitará
navegador de Internet de soporte HTML5
Mostrar más instrucciones
1

Abra un nuevo documento en blanco y el título es " canvas- animation.html . " Apertura el nuevo documento en una aplicación de desarrollo web puede hacer la edición más fácil, pero si usted no tiene uno sólo tiene que utilizar una aplicación básica de edición de texto.
2

Escriba el código para definir el documento HTML5, incluyendo el tipo de documento , la cabeza y el cuerpo del documento. Como en el siguiente ejemplo, establecer el juego de caracteres y el título en el encabezado del documento :

html head < meta charset = "UTF - 8 " /> animación HTML5 Canvas < /title> < /head> <body> < /body> < /html> . <br> 3 <p> Añadir <section> etiquetas y <canvas> en el cuerpo del documento ; . La etiqueta de la sección es nueva en HTML5. En él se definen las secciones de un documento Web. La etiqueta canvas define el lienzo rectangular que va a utilizar para construir la animación JavaScript . El siguiente ejemplo tiene la " animación", ID que se utilizará como referencia por su JavaScript: <br> <p> html head < meta charset = "< DOCTYPE HTML > UTF - 8 "/> <title> animación HTML5 Canvas < /title> < /head> <body> <section> <canvas id="animation"> </canvas > < /seccion> < /body> < /html> . <br> 4 <p> Establecer el ancho y la altura de su lienzo y llenarlo con el texto que se mostrará en los navegadores que no soportan HTML5. El lienzo se puede ajustar a cualquier tamaño, dependiendo de sus necesidades . Recuerde, sin embargo, que los lienzos más grandes tardan más en cargarse . He aquí un ejemplo: < ! DOCTYPE html> <br> <p> html head <meta charset="utf-8" /> <title> HTML5 Canvas Animation < /title> < /head> <body> <section> <canvas id="animation" width="500" height="500"> Lo sentimos , su navegador no soporta HTML5 y , a su vez, , no puede mostrarse la animación. </canvas > < /section> < /body> < /html> . <br> 5 <p> " Paint" de la animación JavaScript en la <canvas> elemento mediante el método " getElementById () " para conectar las secuencias de comandos a la lona " animación " ID . Si usted no tiene experiencia previa por escrito animaciones JavaScript, hay una serie de ejemplos que puedes probar previstas en la sección Recursos de este artículo. <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-trazar-lentamente-en-JavaScript-.html' >Cómo trazar lentamente en JavaScript </a> </div> <div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-mostrar-aleatoria-fragmentos-de-Javascript-.html' >Cómo mostrar aleatoria fragmentos de Javascript </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-onSubmit-.html">Cómo cambiar onSubmit </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-integrar-Windows-Media-Player-en-Javascript-.html">Cómo integrar Windows Media Player en Javascript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-dejar-el-mensaje-de-error-nulo-es-nulo-o-no-un-objeto-.html">Cómo dejar el mensaje de error nulo es nulo o no un objeto </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-convertir-texto-a-números-enteros-en-JavaScript-.html">Cómo convertir texto a números enteros en JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Fecha-Tutorial-Javascript-.html">Fecha Tutorial Javascript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-un-borde-parpadeante-en-DIV-.html">Cómo crear un borde parpadeante en DIV </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Multiple-Rotación-Anuncios-de-JavaScript-.html">Multiple Rotación Anuncios de JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-modificar-CSS-con-JavaScript-.html">Cómo modificar CSS con 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/¿Qué-es-la-escritura-Bloat-.html" >¿Qué es la escritura Bloat </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-subir-películas-Flash-.html" >Cómo subir películas Flash </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><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-PDF-con-Javascript-.html" >Cómo crear PDF con Javascript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-quitar-caracteres-Minus-y-Plus-en-Javascript-.html" >Cómo quitar caracteres Minus y Plus en Javascript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-detectar-los-agentes-de-usuario-y-redireccionamiento-.html" >Cómo detectar los agentes de usuario y redireccionamiento </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-comprobar-un-sitio-web-para-un-Bug-JavaScript-.html" >Cómo comprobar un sitio web para un Bug JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-hacer-un-JavaScript-Compras-.html" >Cómo hacer un JavaScript Compras </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-calcular-la-resolución-de-la-pantalla-con-Java-Script-.html" >Cómo calcular la resolución de la pantalla con Java Script </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-quitar-un-elemento-con-JavaScript-.html" >Cómo quitar un elemento con JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-utilizar-Java-Script-en-Flash-8-.html" >Cómo utilizar Java Script en Flash 8 </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-un-hipervínculo-con-JavaScript-.html" >Cómo cambiar un hipervínculo con JavaScript </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>