Crear una animación en un canvas en HTML5

5 de noviembre de 2016

Libro electrónico gratis:<br>Immanuel Kant  lo bello y lo sublime
Libro electrónico gratis:
Immanuel Kant
lo bello y lo sublime
Libro electrónico gratis:<br>Federico García Lorca Antología selecta
Libro electrónico gratis:
Federico García Lorca
Antología selecta
Libro electrónico gratis:<br>Fray Bartolomé de las Casas Breve relación de la destrucción de las Indias Occidentales
Libro electrónico gratis:
Fray Bartolomé de las Casas
Breve relación de la destrucción de las Indias Occidentales
Tu navegador no soporta canvas

Para crear esta animación en un canvas en html5 el código utilizado en este ejemplo es:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <canvas id="canvas" width="450" height="202" style="border:3px solid #ccc;"> Tu navegador no soporta canvas </canvas> <script type="module"> function animacion_con_canvas() // creamos la función animacion_con_canvas { const mi_canvas = document.getElementById("canvas"); // el elemento bautizado "canvas" sera usado para crear la animaciòn const contexto = mi_canvas.getContext("2d"); // creamos el contexto para poder animar en canvas // canvas soporta animaciones en 2d y en 3d, en este ejemplo usaremos animaciones 2d let img_palomita = new Image(); // creamos un objeto del tipo imagen // Como todo objeto tiene propiedades métodos y eventos img_palomita.src ="./i/canvas/01.png"; // con la propiedad src definimos la imagen a cargar. DEBE ESCRIBIRSE LA RUTA CORRECTA A LA IMAGEN img_palomita.addEventListener('load', animar_imagen, false); // para poder mostrar la imagen, primero debe cargarse... // la imagen tienen el evento load, que se produce cuando la imagen se ha descargado en el navegador // el método EventListener permite verificar cuando la imagen se ha cargado // cuando la imagen se ha cargado ejecutaremos la función mostrar_imagen, que mostrará la imágen en el canvas // el método EventListener utiliza las variables (evento, función a ejecutar, indica si se desea iniciar el registro del evento) let xpos = 0; // posicion inicial de nuesto objeto a animar const velocidad = 0.16; // cuantos pixeles en 0.016 segundos avanzara nuestro objeto a animar // IMPORTANTE: requestAnimationFrame() se ejecuta 60 veces por segundo // aqui el objeto se animará 10 pixeles por segundo // 0.16 = 10 pixeles por segundo / 60 veces por segundo que se ejecuta requestAnimationFrame() // si queremos que nuesto objeto se mueva más rápido o lento, solo tenemos que modificar la velocidad function animar_imagen() // creamos la función animar_imagen para mostrar y mover la imagen en el canvas // esta función se ejecuta cuando la imagen se ha cargado { const fx_animar_imagen = requestAnimationFrame(animar_imagen); // invocamos la función requestAnimationFrame // requestAnimationFrame intenta ejecutar una función 60 veces por segundo // en este caso ejecutará la función animar_imagen // el método requestAnimationFrame utiliza las variables (función a ejecutar) contexto.fillStyle = "#ffffff"; // contexto es un objeto. Como todo objeto tiene propiedades métodos y eventos // aqui utilizamo la propiedad fillStyle para definir el color de fondo de objeto a dibujar contexto.fillRect(0, 0, 450, 202); // aqui utilizamo el método fillRect para crear un rectángulo // el método fillRect utiliza las variables (posición en x, posición en y, ancho, alto) // creamos un rectangulo para borrar el fondo // CANVAS crea animaciones cuadro por cuadro, frame by frame. // 100 años después se sigue usando el mismo método para animar. // Se dibuja un cuadro. Se dibuja otro cuadro. Se dibuja otro cuadro. Y así hasta el infinito. // El secreto está en mostrar sucesivamente esos cuadros para crear la ilusión de animación. // El método RequestAnimationFrame() intenta mostrar 60 cuadros por segundo. ¡Más rápido que el cine! // creamos un rectangulo para borrar el cuadro dibujado previamente por CANVAS contexto.drawImage(img_palomita, xpos, 21); // aqui utilizamo el método drawimage para mostrar a nuestra imagen dentro del canvas // el método drawimage utiliza las variables (imagen a cargar, posición en x, posición en y) // el método drawimage se puede usar indistintamente para cargar imágenes jpg, png o svg // aquí la posición en x cambiará dinámicamente xpos = xpos + velocidad; // aumentamos el valor de xpos con el valor de velocidad } animar_imagen() // ejecutamos la funcion animar_imagen() que creará un loop eterno // el loop ejecutara la funcion animar_imagen() } animacion_con_canvas(); // una vez que se ha cargado la página, iniciamos la animación </script> </body> </html>

Este ejemplo es parte de un tutorial más completo que puede consultarse:


Comenta y opina este texto     Lee mi libro de visitas
© 1997-2022 Alain García Gómez
albegago@hotmail.com
Twitter: Youtube @feesgo
YouTube Youtube
El vínculo a este documento es:

Compartir en facebook Compartir en twitter Compartir en whatsapp Rss

Puedes apoyar a este sitio invitándome a comer...

Este sitio utiliza cookies propias y de terceros para mejorar sus servicios. Si continua navegando, entendemos que acepta su uso. Política de Privacidad