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

 

 


Tema destacado: Tutorial básico de Quickjs


+  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 1,775 veces)
ManuelVR461

Desconectado Desconectado

Mensajes: 1


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

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 pm 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 de imagenes en java para una web
Java
cleverness 3 7,560 Último mensaje 5 Agosto 2009, 14:44 pm
por Debci
¿Que es canvas? « 1 2 »
Dudas Generales
Yasmesita 10 14,246 Último mensaje 19 Septiembre 2011, 19:14 pm
por imoen
Ayuda Java mostrar Secuencia de Imagenes en JPanel al presionar un boton
Java
Nsc-Hack 5 7,398 Último mensaje 19 Junio 2013, 04:39 am
por Nsc-Hack
javascript canvas precarga de imagenes
Desarrollo Web
patilanz 0 1,825 Último mensaje 8 Abril 2014, 23:35 pm
por patilanz
¿Canvas o JPanel?
Java
IronJony 4 4,612 Último mensaje 21 Enero 2015, 15:31 pm
por Usuario Invitado
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines