在for循环中绘制图像集的HTML5 Canvas仅绘制最后一个迭代图像集

Question

我正在尝试使用for循环内的图像加载器绘制图像。它仅在最后一次迭代时绘制所有图像。在控制台中，它不显示draw -> 0或draw -> 1仅显示draw -> 2谢谢你的帮助！！这是我的代码块：        // For every player run iteration        var pos="";        var iter="";        for (var i = 0; i < item.length; ++i) {            // Position for players on account screen            if(i == 0){ pos = "61px"; iter = 0; console.log("pos 0 -> " + iter);}            if(i == 1){ pos = "168px"; iter = 1; console.log("pos 1 -> " + iter);}            if(i == 2){ pos = "275px"; iter = 2; console.log("pos 2 -> " + iter);}            console.log(i);            console.log("pos -> " + pos);            console.log("iter -> " + iter);            // Gets player name from string            let player = item[i].match( /([A-Z])\w+/g );            // Create player div for mouse interaction            let player_el = $('<div class="cursor player" id="player'+ player +'"></div>');            $("#can_wrapper").append(player_el);            $("#player"+ player).css({"position": "absolute", "height": "50px", "width": "50px", "left": ""+ pos +"", "top": "271px", "cursor": "grab", "cursor": "-webkit-grab"});            // Get player name for hover action            let player_name_el = player;            document.styleSheets[0].addRule('#player'+ player +':hover::after','content: "'+player_name_el+'";');            /**             * Promisify loading an image             * @param {String} imagePath The web location of the image             * @returns {Promise} A Promise that will resolve to an Image             */            function loadImage(imagePath) {                return new Promise((resolve, reject) => {                    let image = new Image();                    image.addEventListener("load", () => {                        resolve(image);                    });                });        }

Answer 1

我建议您function loadImage跳出循环圈

如果您使用let代替var并将pos和iter的声明移到for循环中，那么它应该可以工作

function loadImage(imagePath) {

    return new Promise((resolve, reject) => {

        let image = new Image();

        image.addEventListener("load", () => {

            resolve(image);

        });

        image.addEventListener("error", (err) => {

            reject(err);

        });

        image.src = '../interface/images/body/' + imagePath;

    });

}

for (let i = 0; i < item.length; ++i) {

    let pos="";

    let iter="";

    // rest of your code remains unchanged

}