Canvas HTML 加载时间

Question

我尝试使用HTML Canvas制作游戏，但遇到了问题。 当我使用'window.onload'调用我的“init”函数时，程序不会加载任何图像。Canvas已经创建，但图像不存在，当我在chrome控制台中提交我的函数时，图像出现了...所以我想在加载图像完成后执行该函数。 谢谢帮助！

var requestAnimId;

// Initialisation
function init() {

    var tilemapCtx = new Canvas('tilemap', 800, 600, 1);

    var tilemap = new Tilemap("sand", tilemapCtx);

    requestAnimId = window.requestAnimationFrame(update);
}

// Boucle de rafraîchissement
function update() {

    requestAnimId = window.requestAnimationFrame(update);
}

window.onload = init;

这里是瓦片地图：

var Tilemap = function(map, canvas) {

for (var y = 0; y < 10; y++) {

    for (var x = 0; x < 10; x++) {
        // Création de la tile 
        this.image = new Image();
        // Définition de l'image  
        switch(tilemaps[map][y][x]) {
            case " ": 
                this.image.src = "assets/sand.png";
            break;
            case "#": 
                this.image.src = "assets/wall.png";
            break;
        } 
        // Affichage de l'image 
        //canvas.drawImage(this.image, tileX, tileY, tilesetWidth, tilesetHeight, x, y, 32, 32);
        canvas.drawImage(this.image, 32, 32);
    }
}

和画布：

var Canvas = function(name, width, height, zIndex) {
this.canvas = window.document.createElement("canvas");
this.canvas.id = name;
this.canvas.style.position = "absolute";
this.canvas.width = width;
this.canvas.height = height;
this.canvas.style.zIndex = zIndex;
document.body.appendChild(this.canvas);

return this.canvas.getContext('2d');

}

- Karz

Answer 1

请注意，对于您的瓷砖，您只使用两个图像。您使用一个双循环来加载100个图像。

一个问题是当最终您只需要两个时，您正在创建100个图像。

现在，您的图像没有被绘制的原因是因为它们还没有被加载。您需要给您的图像一些时间来加载，然后再尝试绘制它们。

您需要创建一个图像数组列表，并确保它们在调用init()之前已经被加载。 这里将确保在调用init()之前加载了所有图像。

var len = pics.length;
var loadCounter = 0;
for(var i = 0; i < len; i++) {
    $(document.createElement(img)).attr('src', pics[i]).load(function() {
        alert(pics[i] + 'is loaded');
        loadCounter++;
        if(loadCounter === len) {
            alert("all are loaded");   
        }
    });
}

- kemicofa ghost

---

Canvas是我自己创建的一个类。当我看到控制台元素时，画布真的存在，并且图像也在其中正确显示。但只有在我在控制台中自己输入“init”函数时，它才会出现，而不是在加载页面时。 - Karz

请更新您的问题并发布您的Canvas和Tilemap类，同时注意在您的更新中您没有更新任何内容。您所做的只是调用requestAnimationFrame。因此，您将无休止地循环而不做任何事情。 - kemicofa ghost

我写了它们，但就像我说的那样，这不是那个类的问题，这个是正常工作的，但这只是一个加载时间的问题。我尝试过不更新，但没有任何改变。 - Karz

事实上，当我想在init函数中直接绘制图像时，它不会加载...这是我以前没有遇到的问题...在所有教程中，他们都是这样做的，但对我来说却不起作用... - Karz

Console.log可以工作，但是没有图像！这太不可思议了，我尝试禁用缓存，但仍然没有图像。所以这是一个该死的错误。感谢您的帮助。编辑：我刚刚尝试在控制台中输入init，然后图像出现了... - Karz