Не показывать изображения на холсте html5 (javascript) - PullRequest
Новая
       9

Не показывать изображения на холсте html5 (javascript)

4 голосов
/ 24 октября 2011

Я пытаюсь показать шахматные фигуры на доске. Дело в том, что если я разрешаю «alert (img.src)» (таким образом создавая много блоков предупреждений ...), фрагменты будут показываться в нужных местах, НО, если я удалю предупреждение, он покажет только один фрагмент в правом верхнем углу моего холста.

Как вы думаете, что происходит? Спасибо! 

for (var i=1;i<9;i++){
    for (var j=1;j<9;j++){
        var img=new Image();
        img.onload=function(){
                ctx.drawImage(img,p+sqs*(i-1)+(sqs-32)/2,p+bds-sqs*j+(sqs-32)/2,32,32);
        };
        img.src="img/"+squares[i][j]+".png";
        //alert(img.src);
    }
}

1 Ответ

5 голосов
/ 25 октября 2011

Ваша проблема - закрытие Javascript. Если вы не знаете об этом, посмотрите . Если вы добавите alert(i+','+j+','+img.src) к своей функции загрузки и запустите программу, вы увидите, что функция загрузки использует конечные значения переменной цикла - т.е. 9,9.

Чтобы передать значения, которые вы на самом деле хотите передать, вам нужно создать новую область видимости, используя самопризывающуюся анонимную функцию. Итак, ваш код должен выглядеть так: 

for (var i=1;i<9;i++){
    for (var j=1;j<9;j++){
        var img=new Image();
        (function(i,j,img){
            img.onload=function(){
                ctx.drawImage(img,sqs*(i-1),sqs*(j-1),32,32);
            };
            img.src="http://placekitten.com/"+(30+i)+"/"+(30+j);
        })(i,j,img) ;
    }
}

Нажмите здесь для живого примера .

Кстати, причина того, что ваш код работал, когда у вас был оператор alert(img.src), заключалась в том, что вы останавливали цикл на каждой итерации, что приводило к тому, что ваша функция onload (которая не выполняется до загрузки изображения) ) использовал правильные i и j. Без оператора alert цикл устанавливает (i,j) в (9,9) ко времени загрузки любого из изображений.

...