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

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

本文关键字：图像 绘制 代码 路径 变化 Javascript      更新时间：2023-09-26

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

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

该功能将在相同的CCD_ 2上执行。特别是，如果您连续调用此函数两次，那么在调用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);
    }
};
相关文章：