Problema con Canvas para pasarle imagenes

[admin945]

No te preocupes. Me conformo con que ayudes en lo que puedas a la comunidad

Espero que te sirva.

Tendrás que cambiar las imágenes.

http://jsfiddle.net/KzJJm/4/

Código: Seleccionar todo

window.onload = function(){
   
    var imgs = [
         "http://www.foroshtml5.com/styles/html5/imageset/foro-html5.jpg",     
         "http://www.foroshtml5.com/styles/html5/imageset/foro-html5.jpg",     
         "http://www.foroshtml5.com/styles/html5/imageset/foro-html5.jpg",     
         "http://www.foroshtml5.com/styles/html5/imageset/foro-html5.jpg",     
         "http://www.foroshtml5.com/styles/html5/imageset/foro-html5.jpg",     
    ];

    for(i=1; i<imgs.length; i++) {
        var canvas = document.getElementById("im" + i);
        load_image(imgs[i-1], canvas);
    }
   
   
};


function load_image(img, canvas) {
   
    var context = canvas.getContext("2d");
    var destX = 0;
    var destY = 0;
    var imageObj = new Image();
 
    imageObj.onload = function(){
        context.drawImage(imageObj, destX, destY);
    };
    imageObj.src = img
}


Un saludo!

[pkjns]

¡Grande! admin924 ¡grande!

¡Por fin! He sido capaz de hacerlo ...huy, quiero decir, has sido capaz de hacerlo. Después de la coña, muchas gracias.

Mi problema es que me esta costando un poco entender javascript, de hecho si no me hubieras dado tu la respuesta yo ya me hubiera liado con un par de tutoriales respecto de window.onload, lo que con seguridad implicaría que por navidad, mas o menos, estaría intentando pasar las imágenes a los canvas. Es lo que pasa cuando empieza uno desde cero y pretende hacer lo mismo que los profesionales. La impaciencia es mala.

Me quedan un par de dudas respecto a este ultimo código:
Si a la variable "var imgs" le pongo solo cuatro imágenes, la ultima no la muestra. ¿Cual es el motivo?

La linea: [var canvas = document.getElementById("im" + i);] no la entiendo. Todo lo que había leído de getElementById es que aquí tiene que ir el nombre que identifique al canvas y que tiene que coincidir exactamente. Aquí tu simplemente pones "im" y le añades la variable "i" ¿Esto es por el modo en que inicializa js las variables? ¿con esto coge el comienzo del nombre ("im" + i) y lee va sumando uno: im0, im1...?

Como verás por mis preguntas, en mi se cumple aquello de ...la ignorancia es la madre del atrevimiento.

Tal vez, como dices, algún día pueda aportar algo en este foro. Muy agradecido por todo, un saludo.

[admin945]

Hola buenas de nuevo,

jeje se me olvidaba un tema en la función.

el var imgs es un array. Para que te hagas una idea, un array es como una tabla. En nuestro caso, la tabla sería de una celda, donde se guardarían las rutas de las imágenes.

el tema de poner "im" + i quiere decir concatenar elementos. Te quedará muy claro en estos ejemplos:

var i = 1;
var texto = "Hola";
var nombre = "admin";
alert(i + texto + " " + nombre);

Te devolvería "Hola1 admin", es como una "unión".

En la función lo que haces es un bucle, del tipo "for". Y a cada paso le sumas 1 a la variable i, que es como un contador que irá cojiendo 1,2,3 .. etc.

Para hacer sencillo el código anterior, deberías de colocar los nombres de los canvas con un número que empiece por 0, que sería el primero. Porque? porque los arrays tienen como primer indice el numero 0. Que es el índice de un array? la posición. Ejemplo:

var nombres = ['Juan','Manolo','Pepe'];

alert nombres[1] te devolveria Manolo, en lugar de Juan. Es por eso que tendrías que modificar el nombre de tu id de canvas para que coincida con el indice del array.

Final:

Código: Seleccionar todo

window.onload = function(){
   
    var imgs = [
         "http://www.foroshtml5.com/styles/html5/imageset/foro-html5.jpg",     
         "http://www.foroshtml5.com/styles/html5/imageset/foro-html5.jpg",     
         "http://www.foroshtml5.com/styles/html5/imageset/foro-html5.jpg",     
         "http://www.foroshtml5.com/styles/html5/imageset/foro-html5.jpg",     
         "http://www.foroshtml5.com/styles/html5/imageset/foro-html5.jpg",     
    ];

    for(i=0; i<imgs.length; i++) {
        var canvas = document.getElementById("im" + i);
        load_image(imgs[i], canvas);
    }
   
   
};


Recuerda renombrar los canvas a im0, im1, etc

Un saludo!

[pkjns]

¡Vale!

Los arrays y la concatenación si los conocía y entiendo, lo que no veía claro era porque podía recorrer los canvas, ahora ya me ha quedado claro.

Solo he hecho un curso de HTML y tocamos Javascript, pero la "profa" era un poco cerrada y no se salia nada de su guión, así que cuando dimos los arrays se limito a este formato, eso si, lo hicimos con países, con provincias, con colores....
var paises = new Array ();
paises.push("España");
paises.push("Francia");
paises.push("Italia");
paises.push("Alemania");
paises.push("Belgica");
...
Así que como ya has comprobado no he avanzado demasiado. No le estoy echando la culpa de mi torpeza a la "profa" (aunque la tenga) simplemente es que mas que enseñar corría y no he sido capaz de asimilar tanto conocimiento

Ahora ya está entendido (hasta la próxima) y en funcionamiento que es lo interesante.

Gracias. Un saludo.

[admin945]

Jeje, de nada!

Espero que avances y publiques tus dudas!

Saludos!