[Canvas] Rysowanie obrazków (drawImage) z tablicy Opcje

[markuz]

Witam,

Może ktoś z Was miał podobny problem. Na początek kod:

[JAVASCRIPT] pobierz, plaintext 
...
var images = [];
for(var j = 0; j <= ribbons_on_lines.length; j++) {
...
    var length = images.push(new Image());
    var index = length - 1;
    images[index].onload = function() {
        canvas.drawImage(this, line.x1, line.y1);
    };
    images[index].src = ribbon.src.substr(1);
}
...
[JAVASCRIPT] pobierz, plaintext 

Problem tkwi w tym, że zawsze rysowany jest tylko ostatni obrazek. Ma ktoś pomysł jak to rozwiązać?

Ten post edytował markuz 23.05.2014, 09:01:55

[nospor]

canvas.drawImage(this, line.x1, line.y1);
Przeciez to rysujesz dopiero gdy zaladuje sie obraz, a obraz sie zaladuje pewnie dopiero po skonczeniu petli, a co za tym idzie wartosc LINE bedzie ostatnią zapisaną wartością

[markuz]

[JAVASCRIPT] pobierz, plaintext 
var drawImage = function(canvas, src, x, y) {
    var image = new Image();
    image.onload = function() {
        canvas.drawImage(this, x, y);
    }
    image.src = src;
}
 
...
for(var j = 0; j <= ribbons_on_lines.length; j++) {
...
    drawImage(canvas, ribbon.src.substr(1), line.x1, line.x2);
}
[JAVASCRIPT] pobierz, plaintext 

Rozwiązałem to w ten sposób. Dzięki za podpowiedź