mostrar seccuencia de imagenes con canvas.
Publicado por Manuel (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
0
