elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado: Doble factor de autenticación o verificación en dos pasos


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Secuencia de Imagenes en Canvas
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Secuencia de Imagenes en Canvas  (Leído 100 veces)
ManuelVR461

Desconectado Desconectado

Mensajes: 1


Ver Perfil
Secuencia de Imagenes en Canvas
« en: 12 Julio 2017, 19:26 »

Holas amigos del Foro. estoy un poco nuevo en el asunto de canvas html5 y deseo que alguien pueda ayudarme a solucionar un pequenio inconveniente. tengo una serie de imagenes con numeros tipo .png que quiero mostrar uno atras de otro, es decir aparece uno, dura cierto segundo cuando el otro aparece y lo desplaza para durar el mismo tiempo que el anterior y el que es desplazado deberia desaparecer.. mi problema es que lo mas basico que es mostrar uno y durar un tiempo para mostrar otro no sucede porque cuando hago los ciclos del array de imagenes solo queda el primero y ele resto no. y eso que en cada secuencia creo el objeto imagen con el path respectivo. les agradeceria alquien pudiera ayudarme...

Código
  1. var canvas = document.getElementById('sorteo');
  2.    if (canvas.getContext) {
  3.        var ctx = canvas.getContext('2d');
  4.        var width = canvas.width;
  5.        var height = canvas.height;
  6.        var y=0;x=1;z=0;
  7.        var imagenes = "<?php echo $cadena-imagenes; ?>";
  8.        var todasimagenes = imagenes.split("-");
  9.  
  10.        var Images= [];
  11.  
  12.  
  13.        function cargarimagen(src) {
  14.            var image = new Image();
  15.            image.src = src;
  16.            console.log(src);
  17.            dibujar(image);            
  18.            return;
  19.        }
  20.  
  21.        function dibujar(image){
  22.            if(x < 11){
  23.                image.onload =function(){
  24.                    ctx.drawImage(image, 175, (205+(x*8)), (50+(x*8)), (50+(x*8)));
  25.                };
  26.                x++;
  27.                window.setInterval(function(){
  28.                    ctx.clearRect(0,0,canvas.width,canvas.height);
  29.                    dibujar(image);
  30.                }, 1000);
  31.            }else{
  32.                y++;
  33.                window.setInterval(function(){
  34.                    cargarsecuencia();
  35.                }, 1000);
  36.  
  37.                return;
  38.            }
  39.  
  40.        }
  41.  
  42.  
  43.        var cargarsecuencia = function () {
  44.            if( y < Images.length){
  45.                cargarimagen(Images[y]);
  46.            }
  47.        };
  48.  
  49.        var init = function () {
  50.            todasimagenes.forEach(function(b){
  51.                Images[z++]='./images/fotos/' + b+ '.png';
  52.            });
  53.            cargarsecuencia();
  54.        };
  55.  
  56.        window.addEventListener('load', init);
  57.    }


« Última modificación: 12 Julio 2017, 19:41 por engel lex » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Secuencia imágenes.
Dudas Generales
h0oke 2 558 Último mensaje 17 Junio 2009, 03:17
por h0oke
secuencia de imagenes en java para una web
Java
cleverness 3 6,058 Último mensaje 5 Agosto 2009, 14:44
por Debci
¿Que es canvas? « 1 2 »
Dudas Generales
Yasmesita 10 9,342 Último mensaje 19 Septiembre 2011, 19:14
por imoen
Ayuda Java mostrar Secuencia de Imagenes en JPanel al presionar un boton
Java
Nsc-Hack 5 3,629 Último mensaje 19 Junio 2013, 04:39
por Nsc-Hack
javascript canvas precarga de imagenes
Desarrollo Web
patilanz 0 308 Último mensaje 8 Abril 2014, 23:35
por patilanz
Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines