Javascript代码绘制相同的图像，即使图像路径发生变化

我现在遇到的问题是，如果我尝试画两个不同的图像，它会画两次相同的图像。所有这些代码都发生在一个循环中（这可能是个问题吗？）。调用要绘制的图像的代码是：

    drawImage(imageData.background, 0, 0, 2048, 1918, 0, 0, 2048, 1918);
    drawImage(currentData.player.image, 0, 0, 32, 32, 30, 30, 32, 32);

我的drawImage功能如下：

    function drawImage(whatIMG, spriteX, spriteY, sizeX, sizeY, posX, posY, x, y) {
        drawCanvasImage = new Image();
        drawCanvasImage.src = whatIMG;
        drawCanvasImage.onload = function(){
          ctx.drawImage(drawCanvasImage, spriteX, spriteY, sizeX, sizeY, posX, posY, x, y);
        }
    };

因此，尽管imageData.background和currentData.player.image完全不同，但只有最后提到的图像链接是在画布上绘制的图像

我的直觉告诉我，在“drawCanvasImage”对象加载图像后，我可能需要以某种方式清除它，尽管我不确定它是否应该在每次函数完成后删除（？）

---

任何帮助都将不胜感激，谢谢：）

在javascript中，当您不使用

var

来声明变量时，您的变量是隐式全局变量

当你这样做的时候

function drawImage(whatIMG, spriteX, spriteY, sizeX, sizeY, posX, posY, x, y) {
    drawCanvasImage = new Image();
    drawCanvasImage.src = whatIMG;
    ...
}

该功能将在相同的

drawCanvasImage

上执行。特别是，如果您连续两次调用此函数，则在调用

onload

函数之前，

drawCanvasImage

将快速更改。执行的结果如下所示：

drawCanvasImage = new Image();
drawCanvasImage.src = imageData.background;

drawCanvasImage = new Image();
drawCanvasImage.src = currentData.player.image;

// After the thing is loaded
ctx.drawImage(drawCanvasImage, ...); // params the first call... maybe
ctx.drawImage(drawCanvasImage, ...); // params of the other one

也许这样编写函数可以解决您的问题：

function drawImage(whatIMG, spriteX, spriteY, sizeX, sizeY, posX, posY, x, y) {
    // use var keyword so drawCanvasImage is scoped in this function
    // when you will call this function again,
    // a different drawCanvasImage will be used
    var drawCanvasImage = new Image(); 
    drawCanvasImage.src = whatIMG;
    drawCanvasImage.onload = function(){
      ctx.drawImage(drawCanvasImage, spriteX, spriteY, sizeX, sizeY, posX, posY, x, y);
    }
};

---

imageData.background

和

currentData.player.image

都是图像的路径吗？这可能没有什么帮助，但我认为有了这段代码，每次你想画的时候，你都可以下载

img

。也许最好有一个

SpriteManager

，它可以下载一次图像，并将它们存储在某个地方。嗨，谢谢你的回复。是的，“imageData.background”和“currentData.player.image”都是指向图像的路径。你是正确的，我将期待实现一个功能，下载所有的图像加载，然后再也不下载每个循环。回到上一点，如果我注释掉第二个drawImage函数，第一个drawImage会正确地绘制我想要显示的图像。这表明链接工作正常。我想我理解了问题所在，您可以尝试在行前面添加

var

关键字

drawCanvasImage=new Image（）？太棒了，谢谢你的帮助。我玩弄了你的代码，最后只把
（drawCanvasImage）
添加到我的drawImage函数的末尾。不知道为什么，但这很有效，不是吗。。。不是吗？！无论如何，非常感谢：）检查我给出解释的答案，以及解决您问题的另一种方法（我认为），javascript是一种复杂的语言，我认为理解这些东西是如何工作的很重要，否则您可能会在同样的问题上再次挣扎：异步很困难谢谢，我对代码做了一些修改，现在它可以工作了。谢谢你把它添加到一个官方，回答，现在我可以给你更多的分数或东西！有趣的是，缺少var会使某些东西变得全球化。。。我不知道！：）