Javascript 问题：使用drawImage（）在画布上绘制多个图像

我就是不能让它为我工作

我正在尝试使用drawImage在画布上绘制多个图像。我觉得我忽略了一些小东西

它应该在画布上画18张牌。它将从左侧开始50px，从顶部开始向下，并绘制每个卡100w*150h。每个卡映像之间应该有25px。画布尺寸设置为825w*600h

试图用纯Javascript实现这一点，而不是jQuery。感谢您的帮助

图像是当前绘制到我的画布上的方式。

---

JS变量的作用域不是块，而是函数。因此，当img.onload访问x和y时，它们引用x和y的最终值。 要创建块作用域变量，请使用let语句或iife

// Draw the cards to the canvas.
function drawCards()
{
    // Starting positions.
    var x = 50;
    var y = 50;

    // Counter that will hold current card position.
    var cardCount = 0;

    var img = new Image(100, 150);

    // How many rows.
    for (var row = 0; row < 3; row++)
    {
        // How many columns.
        for (var column = 0; column < 6; column++)
        {
            // Store the current card.
            var card = memoryDeck[cardCount];

            // Check if the card is flipped, if it is set an image with url to face card.
            if (card.flipped == true)
            {
                (function(x, y) {
                img.onload = function() {
                    ctx.drawImage(this, x, y, 100, 150);
                }
                img.src = card.faceImage;
                })(x, y);
            }
            // Otherwise set image url to back of card.
            else
            {
                (function(x, y) {
                img.onload = function() {
                    ctx.drawImage(this, x, y, 100, 150);
                }
                img.src = card.backImage; 
                })(x, y);          
            }

            // Increase the x position (the width of a card, plus the space in between), and the current card position being stored.
            x += 125; 
            cardCount++;
    }

        // We are on a new row, reset the column card position and increase the row card position.
        x = 50;
        y += 175;
     }

}

一个类似的简单问题是：

阅读源代码！ 功能演示1{

---

对于var i=0；i给定的答案是有问题的，因为它在循环中声明函数调用。这种声明模式是危险的，如果您不理解闭包，可能会导致内存泄漏。用于克服范围问题的方法也非常低效。代码将无法工作，因为只有一个映像正在创建，并且设置src时，取消上一次加载src，并再次启动进程

此外，创建匿名函数会使调试代码变得更加困难，因为任何错误都会创建难以跟踪的跟踪，并且分析也会很难读取。请始终命名函数，并始终将函数放在其作用域的顶部

function drawCards(){
    // declare all variables and functions
    var row, column, src, cardIndex, card;
    function loadThenDisplayImage (src, x, y) {
        var image;
        function onImageload () {
             ctx.drawImage(this, x, y, cardW, cardH);
        }
        image = new Image(cardW, cardH);
        image.src = src;
        image.onload = onImageLoad;
    }
    // define constants and variables.
    const left = 50;
    const top = 50;
    const cardW = 100;
    const cardH = 150;
    const xSpacing = 25;
    const ySpacing = 25;
    cardIndex= 0;

    // function logic 
    for (row = 0; row < 3; row += 1) {
        for (column = 0; column < 6; column += 1) {
            card = memoryDeck[cardIndex += 1];
            scr = card.flipped ? card.faceImage : card.backImage;
            loadThenDisplayImage(  // long function call best split for readbility
                src, 
                left + (cardW + xSpacing) * column, 
                top + (cardH + ySpacing) * row
            );
        }
     }
}

---

这解决了我一半的问题。谢谢！我仍然需要弄清楚为什么它只绘制了最后一幅图像…：/看起来我没有完全应用它。使用了它，进行了轻微的调整，并成功地修复了整个问题。非常感谢！

function drawCards(){
    // declare all variables and functions
    var row, column, src, cardIndex, card;
    function loadThenDisplayImage (src, x, y) {
        var image;
        function onImageload () {
             ctx.drawImage(this, x, y, cardW, cardH);
        }
        image = new Image(cardW, cardH);
        image.src = src;
        image.onload = onImageLoad;
    }
    // define constants and variables.
    const left = 50;
    const top = 50;
    const cardW = 100;
    const cardH = 150;
    const xSpacing = 25;
    const ySpacing = 25;
    cardIndex= 0;

    // function logic 
    for (row = 0; row < 3; row += 1) {
        for (column = 0; column < 6; column += 1) {
            card = memoryDeck[cardIndex += 1];
            scr = card.flipped ? card.faceImage : card.backImage;
            loadThenDisplayImage(  // long function call best split for readbility
                src, 
                left + (cardW + xSpacing) * column, 
                top + (cardH + ySpacing) * row
            );
        }
     }
}