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

5 de noviembre de 2016

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"> <script> window.onload = function() // esto es un comentario en javascript // aqui creamos una función // cuando la página se cargue, ejecutarmos el siguiente código { animacion_con_canvas(); // cuando la página se cargue, ejecutarmos otra función animacion_con_canvas(); } function animacion_con_canvas() // creamos la función animacion_con_canvas { var mi_canvas = document.getElementById("canvas"); // el elemento bautizado "canvas" sera usado para crear la animaciòn var 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 var img_palomita = new Image(); // creamos un objeto del tipo imagen // Como todo objeto tiene propiedades métodos y eventos img_palomita.src ="./i/canvas/s01.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) var xpos = 0; // posicion inicial de nuesto objeto a animar var 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 { 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 } } </script> </head> <body> <canvas id="canvas" width="450" height="202" style="border:3px solid #ccc;"> Tu navegador no soporta canvas </canvas> </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-2019 Alain García Gómez
albegago@hotmail.com
Twitter: @feesgo
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