EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            canvas html5
            Elemento Canvas en HTML5
            17/11/2019
            referencias sonido video animaciones
            Referencias y recursos: sonido, vídeos y animaciones
            22/11/2019

            Animaciones en Canvas

            animaciones canvas

            En el apartado anterior hemos visto cómo pintar gráficos en un lienzo de <canvas>. Veamos ahora cómo realizar una pequeña animación y cómo interactuar con los elementos del lienzo mediante el teclado.

            1. Animaciones en Canvas

            Para crear animaciones o videojuegos en Canvas seguiremos los siguientes pasos:

            1. Pintamos un gráfico en Canvas.
            2. Borramos el Canvas pasados unos milisegundos.
            3. Volvemos a pintar un gráfico con un ligero cambio.
            4. Borramos el Canvas pasados unos milisegundos.
            5. Seguimos el mismo proceso de los pasos anteriores.

            Esta técnica es como crear dibujos animados utilizando una hoja que hay que borrar en cada fotograma. Este borrado se realiza tan rápido que el ojo humano humano no lo detecta y lo que se aprecia es una animación. Este es el principio que se suele aplicar en los videojuegos en dos dimensiones.

            En JavaScript se utiliza el método setInterval() para ejecutar un código concreto cada cierto tiempo. Sin embargo, para modificar el Canvas en intervalos de tiempo se utiliza el método requestAnimationFrame(función).

            function run(){
                //requestAnimationFrame(): informa de que queremos realizar una animación y solicita que el navegador programe el repintado de la ventana para el próximo ciclo de animación.
                requestAnimationFrame(run); //animación optimizada
                accionesJuego();
                pintarLienzo(lienzo);
            }

            Veamos un ejemplo:

            default

            Ejemplos más avanzados:

            Rejilla a modo de lienzo:

            0

            Juego de la serpiente:

            0

            Ver 10 juegos sencillos realizados con HTML5 y Canvas

            Comprueba tu aprendizaje

            ¿Qué método utilizamos para pintar un Canvas en intervalos de tiempo?

            ¡Bien! ¡Has fallado!

            Ejercicios propuestos

            Actividad 8

            Partiendo de la animación vista en clase realiza las siguientes modificaciones:

            • Implementa el movimiento del player por el lienzo en función de las teclas presionadas (KEY_LEFT=37, KEY_UP=38, KEY_RIGHT=39, KEY_DOWN=40;).
            • Implementa la funcionalidad “pausar el juego”.
            Compartir

            UD6. Sonido, Vídeo y animaciones

            • 1. Formatos de vídeo y conversiones
            • 2. Inserción de vídeo en HTML5
            • 3. Formatos de audio y optimizaciones
            • 4. Inserción de audio en HTML5
            • 5. Control de vídeo y audio con JavaScript
            • 6. Animaciones con propiedad animation
            • 7. Canvas en HTML5
            • 8. Animaciones en Canvas
            • 9. Referencias y recursos: sonido, vídeos y animaciones

            Diseño de Interfaces Web

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results