¿Que pasaría si en una animación no borramos el cuadro previamente dibujado por CANVAS?

5 de noviembre de 2016

Libro electrónico gratis:<br>Rubén Darío Azul
Libro electrónico gratis:
Rubén Darío
Azul
Libro electrónico gratis:<br>Charles Perrault Cuentos
Libro electrónico gratis:
Charles Perrault
Cuentos
Libro electrónico gratis:<br>Manuel Payno El fistol del diablo
Libro electrónico gratis:
Manuel Payno
El fistol del diablo
Tu navegador no soporta canvas

¿Que pasaría si en una animación no borramos el cuadro previamente dibujado por CANVAS? El código de 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 mostrar_imagen para mostrar 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.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() } animacion_con_canvas(); </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