Question

基本上我一直试图做的是制作一个循环，循环通过一吨（仅36个大气压）的瓷砖，然后按顺序放置。虽然该部分有效，但它实际上并没有加载图像并显示图像。

使用console.log，我将问题缩小到绘制图像的时间（或者至少我很确定这是问题所在。）

我尝试过切换本地变量和全局变量，而且似乎没有做任何事情，而且我也改变了我所拥有的只是：

ctx.drawImage(loadTile, tileToLoadX, tileToLoadY);

要：

loadTile.onload = function() {
ctx.drawImage(loadTile, tileToLoadX, tileToLoadY);
};"

许多人建议如何处理类似的问题。

var canvas = document.getElementById("mapcanvas");
var ctx = canvas.getContext("2d");

GTH = 3000;
GTW = 3000;

tileCountX = 6;
tileCountY = 6;

mapWidth = tileCountX * GTW;
mapHeight = tileCountY * GTH;

function imageSearch() {
for (u=1; u < tileCountY + 1; u++) {
    for (i=1; i < tileCountX + 1;i++) {
    tileToLoad = "x" + i + "y" + u;
    tileToLoadX = i * GTW - GTW;
    tileToLoadY = u * GTH - GTH;
    console.log("Successfully found tile " + tileToLoad);
    loadImg();
    }
}
};
function loadImg() {
var loadTile = new Image();
loadTile.src = 'Top/x+y+/' + tileToLoad + ".png";
loadTile.onload = function() {
ctx.drawImage(loadTile, tileToLoadX, tileToLoadY);
};
console.log("Successfully loaded tile " + tileToLoad);
};

imageSearch();

另请注意，画布应与瓷砖大小相同，GTH和GTW是所有瓷砖的默认高度和宽度。

帮助将不胜感激！谢谢！

Answer 1

我对可能发生的事情有2个想法。

您的src路径不正确

loadTile.src = 'Top/x+y+/' + tileToLoad + ".png";

确认控制台中没有任何负载问题。

您在屏幕外绘制图像

你的画布真宽18000像素吗？尝试ctx.drawImage（loadTile，0,0）;并查看图像是否被绘制到画布上。

注意

不要使用全局变量。 imageSearch（）很可能在第一个图像加载之前完全执行。这将导致所有瓷砖都在同一位置绘制，我相信你不想要它。

Answer 2

在你的功能中

function loadImg() {
    var loadTile = new Image();
    loadTile.src = 'Top/x+y+/' + tileToLoad + ".png";
    loadTile.onload = function() {
        ctx.drawImage(loadTile, tileToLoadX, tileToLoadY);
    };
    console.log("Successfully loaded tile " + tileToLoad);
};

变量tileToLoad，tileToLoadX和tileToLoadY属于函数imageSearch()作为局部变量，并且未定义。

此外，在为图像变量指定loadTile.onload之前，需要设置src操作。

尝试进行以下更改。

function imageSearch() {
    for (u=1; u < tileCountY + 1; u++) {
        for (i=1; i < tileCountX + 1;i++) {
            tileToLoad = "x" + i + "y" + u;
            tileToLoadX = i * GTW - GTW;
            tileToLoadY = u * GTH - GTH;
            console.log("Successfully found tile " + tileToLoad);
            loadImg(tileToLoad,tileToLoadX,tileToLoadY); //send variables along
        }
    }
};

function loadImg(img,imgX,imgY) { //added new arguments for the function
    var loadTile = new Image();
    loadTile.onload = function() {
        ctx.drawImage(loadTile, imgX, imgY);
    };
    loadTile.src = 'Top/x+y+/' + img + ".png"; //moved this to after the onload.
    console.log("Successfully loaded tile " + img);
};

DrawImage没有在画布中绘图

2 个答案: