Cómo crear una animación con la etiqueta canvas de html5

Aunque el HTML5 lona etiqueta puede no reemplazar a Flash como un mecanismo para la aplicación de juegos y animaciones en el navegador, es razonablemente fácil de añadir animación a una lona imagen. La clave es utilizar las características de animación ya están integrados en el navegador.

Estructura básica del bucle de animación en canvas de HTML5

Una animación en general, requiere una organización especial llamada bucle de animación. La estructura básica de la animación de bucle funciona de la misma en cualquier idioma:

1. Inicialización.

   Crear los activos, incluyendo el fondo y cualquiera de los objetos que va a utilizar. Los objetos que se pueden manipular en tiempo real se llaman normalmente sprites. Generalmente, esto se hace cuando el programa se ejecuta en primer lugar, para ahorrar tiempo durante la ejecución principal. También puede establecer las constantes de tamaño de imagen, tamaño de la pantalla, velocidad de fotogramas y otros valores que no cambian durante la ejecución del juego.

2. Determinar una velocidad de fotogramas.

   Animaciones y juegos funcionan llamando a una función en repetidas ocasiones a una velocidad prescrita. En javascript, normalmente se utiliza el setInterval () función para especificar una función repetida. los cuadros por segundo indica con qué frecuencia se llama la función especificada. Juegos y animaciones normalmente se ejecutan a velocidades de cuadro entre 10 y 30 fotogramas por segundo. Una velocidad de fotogramas más rápido es más suave, pero puede no ser fácil de mantener con un poco de hardware.

3. Evaluar el estado actual.

   Cada sprite es realmente un elemento de datos. Durante cada cuadro, determinar si ha ocurrido algo importante: ¿el usuario pulse una tecla? Es un elemento supone que mover? Realizó un sprite de salir de la pantalla? Hicimos dos sprites conk entre sí?

4. Modificar datos del sprite.

   Cada sprite tiene generalmente posición o datos de rotación que puede ser modificado durante cada trama. Por lo general, esto se hace a través de transformaciones (traslación, rotación y escala), aunque a veces puede pasar de una imagen en su lugar.

5. Borrar el fondo.

   Una animación es en realidad una serie de imágenes dibujadas rápidamente en el mismo lugar. Por lo general, tendrá que limpiar el fondo al comienzo de cada cuadro para borrar la última imagen del marco.

6. Redibujar todos los sprites.

   Cada sprite se vuelve a dibujar utilizando sus nuevos datos. Los sprites parecen moverse porque se ven envueltas en una nueva ubicación o la orientación.

La creación de las constantes de una función de animación en canvas de HTML5

La construcción de un programa que hace girar una imagen dentro de un lienzo requiere de varios lotes de código. El primer trabajo es la creación de las diversas variables y constantes que describen el problema. El siguiente código se crea fuera de cualquier función, ya que describe los valores que serán compartidos entre las funciones de:

 var dibujo-var ángulo con-var goofyPic-var = 0-CANV_HEIGHT = 200-CANV_WIDTH = 200-SPR_HEIGHT = 50-SPR_WIDTH = 40-

los dibujo variables se referirá a la lona elemento. los estafa variable será el contexto de dibujo, goofyPic es la imagen que desea girar, y ángulo se utilizará para determinar la cantidad de la imagen se gira actualmente. Los otros valores son constantes utilizadas para describir la altura y la anchura de la tela, así como el sprite.

La implementación de la animación en canvas de HTML5

Utilizar el body onload mecanismo para poner en marcha un código tan pronto como la página ha terminado de cargar. Sin embargo, la página tiene ahora dos funciones. los en eso() función controla la inicialización y el dibujar() función será llamada repetidamente para manejar la animación real. Aquí está el código en el en eso() función:

Video: HTML5 - Canvas

 función init () {dibujo = document.getElementById ("dibujo") -CON = drawing.getContext ("2d") -goofyPic = document.getElementById ("goofyPic") -setInterval (sorteo, 100) - init} // fin

El trabajo de la en eso() la función es inicializar cosas. En este ejemplo particular, varios elementos (la lona, ​​del contexto, y la imagen) se cargan en variables javascript, y la animación está configurado. los setInterval () función se utiliza para establecer el bucle principal de animación. Se necesitan dos parámetros:

• Una función repetible: El primer parámetro es el nombre de una función que será llamada repetidamente. En este caso, el dibujar función será llamada muchas veces.

• Un valor de retardo: El segundo parámetro indica la frecuencia con la función debe ser llamada en milisegundos (1/1000 de segundo). Un retraso de 100 creará una velocidad de 10 fotogramas por segundo. Un retraso de 50 provocará una velocidad de cuadros de 20 cuadros por segundo, y así sucesivamente.

Dar animación a la trama actual en canvas de HTML5

los dibujar() función será llamada muchas veces en sucesión. En general, su tarea es limpiar el marco, el cálculo de los nuevos estados de sprites, y volver a dibujar el sprite. Aquí está el código:

 sorteo function () {// backgroundcon.fillStyle claro = "blanco"-con.fillRect (0, 0, CANV_HEIGHT, CANV_WIDTH) - // dibujar bordercon.strokeStyle = "rojo"-con.lineWidth = "5"-con.strokeRect (0, 0, CANV_WIDTH, CANV_HEIGHT) - // cambiar el angleangle rotación + = 0,25-Si (ángulo gt; Math.PI * 2) {= ángulo de 0 -} // iniciar una nueva systemcon.save transformación () - con.translate (100, 100) -con.rotate (ángulo) - // dibujar la imagecon.drawImage (goofyPic, SPR_WIDTH / -2, SPR_HEIGHT / -2, SPR_WIDTH, SPR_HEIGHT) -con.restore () -} // sorteo final

Mientras que el código puede parecer un poco involucrados, que en realidad no hace nada nuevo:

1. Borrar el fondo.

   Video: Animación básica con HTML5 - Introducción

   Recuerde que la animación se repite el dibujo. Si no vacía el fondo al comienzo de cada cuadro, verá los dibujos de trama anterior. Utilice la década de contexto clearRect () función para dibujar un fondo fresco, o una de las otras herramientas de dibujo para utilizar una imagen de fondo más complejo.

2. Dibuje cualquier contenido nonsprite.

   Por ejemplo, puede utilizar strokeStyle, ancho de línea, y strokeRect () para construir un marco rectangular de color rojo alrededor de la lona. Tenga en cuenta que la CANV_HEIGHT y las constantes CANV_WIDTH se refieren al tamaño del lienzo actual.

3. Modificar el estado de sprites.

   Para modificar el ángulo de rotación de la imagen en el ejemplo, la variable llamada ángulo fue creado fuera de la función. (Es importante que ángulo fue creado fuera del contexto de la función para que pueda conservar su valor entre llamadas a la función.) A continuación, puede añadir una pequeña cantidad de ángulo cada cuadro.

   Siempre que se cambia una variable (especialmente en un bucle sin fin como un virtualmente animación), usted debe comprobar si hay condiciones de contorno. El valor del ángulo admisible más grande (en radianes) es dos veces pi. Si el ángulo se hace más grande que eso, se restablece a cero.

4. Construir una transformación. Configurar una nueva transformación con la salvar() método, y el uso de la girar() y traducir() funciones para transformar un sistema de coordenadas temporal.

   Muchas animaciones son realmente las modificaciones de una transformación. La imagen no está cambiando, sólo la transformación que contiene la imagen.

5. Dibujar la imagen en el centro de la nueva transformación.

   los drawImage () mando traza la imagen basada en la esquina superior izquierda de la imagen. Si dibuja la imagen en (0, 0) de la nueva transformación, la imagen aparecerá a girar alrededor de su esquina superior izquierda. Por lo general, tendrá una imagen para girar alrededor de su punto central. Basta con dibujar la imagen para que su centro se encuentra en el origen. Set X a cero menos la mitad el ancho de la imagen, e Y a cero menos media altura de la imagen.

6. Cierre la transformación. Utilizar el restaurar() método para terminar de definir el sistema de coordenadas temporal.