HTML - mostrar seccuencia de imagenes con canvas.

 
Vista:
Imágen de perfil de Manuel
Val: 1
Ha disminuido su posición en 39 puestos en HTML (en relación al último mes)
Gráfica de HTML

mostrar seccuencia de imagenes con canvas.

Publicado por Manuel ManuelVR461@gmail.com (1 intervención) el 12/07/2017 18:35:15
Holas amigos del Foro. estoy un poconuevo en el asunto de canvas html5 y deseo que alguien pueda ayudarme a solucionar un pequeño 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...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
var canvas = document.getElementById('sorteo');
if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var width = canvas.width;
    var height = canvas.height;
    var y=0;x=1;z=0;
    var imagenes = "<?php echo $cadena-imagenes; ?>";
    var todasimagenes = imagenes.split("-");
 
    var Images= [];
 
 
    function cargarimagen(src) {
        var image = new Image();
        image.src = src;
        console.log(src);
        dibujar(image);
        return;
    }
 
    function dibujar(image){
        if(x < 11){
            image.onload =function(){
                ctx.drawImage(image, 175, (205+(x*8)), (50+(x*8)), (50+(x*8)));
            };
            x++;
            window.setInterval(function(){
                ctx.clearRect(0,0,canvas.width,canvas.height);
                dibujar(image);
            }, 1000);
        }else{
            y++;
            window.setInterval(function(){
                cargarsecuencia();
            }, 1000);
 
            return;
        }
 
    }
 
 
    var cargarsecuencia = function () {
        if( y < Images.length){
            cargarimagen(Images[y]);
        }
    };
 
    var init = function () {
        todasimagenes.forEach(function(b){
            Images[z++]='./images/fotos/' + b+ '.png';
        });
        cargarsecuencia();
    };
 
    window.addEventListener('load', init);
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de cachaco
Val: 3
Ha aumentado su posición en 17 puestos en HTML (en relación al último mes)
Gráfica de HTML

mostrar seccuencia de imagenes con canvas.

Publicado por cachaco (1 intervención) el 02/04/2019 00:42:23
hey amigo como le a ido en la creacion de video juegos en canvas
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 272
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

mostrar seccuencia de imagenes con canvas.

Publicado por Alejandro (72 intervenciones) el 03/04/2019 00:41:05
En los códigos fuentes deje un ejemplo de animación con sprite sheets, quizá te pueda ser útil.
Aquí el enlace
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar