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

Question

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

    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是完全不同的，但只有最后提到的link的图像才是在canvas上绘制的图像。 This is what it looks like

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

任何帮助将不胜感激，谢谢:)

Answer 1

在 javascript 中，当您不使用单词 var 来声明您的变量时，您的变量是隐含的全局变量。

当你这样做时

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

该函数将在同一个 drawCanvasImage 上执行。特别是，如果连续两次调用此函数，drawCanvasImage 会在调用 onload 函数之前非常快速地更改。执行结果将如下所示：

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);
    }
};

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

Javascript code is drawing the same image even when image path changes

javascript

canvas

image

html5-canvas