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

Aunque el HTML5 lona

etiqueta podría no reemplazar 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 un lona imagen. La clave es utilizar las funciones de animación ya están integrados en el navegador.

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

Una animación en general, requiere una organización especial llamada bucle de animación. La estructura básica del bucle de animación 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 normalmente se denominan sprites. Generalmente, esto se hace cuando el programa se ejecuta primero, para ahorrar tiempo durante la ejecución principal. También puede establecer constantes de tamaño de imagen, tamaño de la pantalla, velocidad de fotogramas, y otros valores que no cambiarán durante la ejecución del juego.

2. Determine una velocidad de fotogramas.

   Las animaciones y los juegos funcionan llamando a una función varias veces a una velocidad prescrita. En javascript, se utiliza normalmente la 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 suelen correr 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 sprites es realmente un elemento de datos. Durante cada fotograma, determinar si algo importante ha sucedido: ¿El usuario pulse una tecla? Es un elemento supone que mover? Hizo un sprite salir de la pantalla? Hicimos dos sprites conk en la otra?

4. Modificar los datos de sprites.

   Cada elemento sprite tiene generalmente la 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. Desactive el fondo.

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

6. Volver a dibujar los sprites.

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

La creación de las constantes de un largometraje de animación en HTML5 lienzo

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

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

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

Implementación de la animación en HTML5 lienzo

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 cuenta con dos funciones. los en eso() maneja la función de inicialización, y el dibujar() función será llamada varias veces para manejar la animación real. Aquí está el código en el en eso() función:

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

El trabajo del en eso() función es inicializar cosas. En este ejemplo en particular, varios elementos (el lienzo, el contexto, y de la imagen) se cargan en las variables de 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 se llama 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 un segundo). Un retraso de 100 creará una velocidad de 10 fotogramas por segundo. Un retraso de 50 causará una velocidad de 20 fotogramas por segundo, y así sucesivamente.

Dar animación a la trama actual en HTML5 lienzo

los dibujar() función se llama muchas veces seguidas. 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:

 función draw () {// clara backgroundcon.fillStyle = "blanco" -con.fillRect (0, 0, CANV_HEIGHT, CANV_WIDTH) - // dibujar bordercon.strokeStyle = "red" -con.lineWidth = -con "5". strokeRect (0, 0, CANV_WIDTH, CANV_HEIGHT) - // cambiar el angleangle rotación + = 0,25; si (ángulo> Math.PI * 2) {ángulo = 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, en realidad no hace nada nuevo:

1. Desactive el fondo.

   Recuerde que la animación se repite dibujo. Si no desactiva el fondo al comienzo de cada cuadro, verá los dibujos marco anteriores. 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 función para que pueda mantener su valor entre llamadas a la función.) A continuación, puede añadir una pequeña cantidad de ángulo cada fotograma.

   Cada vez que se cambia una variable (especialmente en un circuito prácticamente infinitas como una animación), usted debe comprobar las condiciones de contorno. El valor más grande ángulo admisible (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 el guardar() método, y utilizar el rotar () y translate () funciones para transformar un sistema de coordenadas temporal.

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

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

   los drawImage () comando dibuja 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, usted querrá una imagen para girar alrededor de su punto central. Basta con dibujar la imagen de modo que su centro está en el origen. Set X a cero menos la mitad del ancho de la imagen, e Y a cero menos la mitad de altura de la imagen.

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