drawImage() не рисует предварительно загруженный объект изображения. Использование OO javascript

Я пишу простую 2D-игру с боковым скроллером, используя JavaScript + Canvas. Я пытаюсь сделать это, изучая OO JavaScript. Я столкнулся с проблемой, когда мое изображение не будет отображаться на холсте, несмотря на то, что оно загружено правильно. Вот код:

//===================================
// class - Canvas
//===================================

var classCanvas = function(id){
    canvas  = document.getElementById(id);
    context = canvas.getContext("2d"); 
}

//===================================
// abstract class - Image Drawer
//===================================

var classImageDrawer = function(that){
this.draw = function(){
    context.drawImage(that.img,
                      that.spriteCoordsX,
                      that.spriteCoordsY,
                      that.width,
                      that.height,
                      that.posX,
                      that.posY,
                      that.width,
                      that.height);
    }
}

//===================================
// class - Level
//===================================

var classLevel = function(name, src){
   this.name           = name;
   this.img            = new Image();
   this.img.src        = src;
   this.img.onload     = function(){ };
   this.spriteCoordsX  = 0;
   this.spriteCoordsY  = 0;
   this.posY           = 0;
   this.posX           = 0;
   this.height         = 400;
   this.width          = 600;
   this.drawer         = new classImageDrawer(this);
}

//==================================
//  Begin 
//==================================

var game      = new classCanvas("playground");
game.LevelOne = new classLevel("LevelOne", "images/foreground-land.png");

game.LevelOne.drawer.draw();

Я проверил код и знаю, что изображение загружается правильно. Во время выполнения ошибок не возникает, изображение "foreground-land.png" просто не отображается на холсте!

Источник

2 ответа

Решение

Ваше изображение может загружаться нормально, но, насколько я могу судить, ваш звонок game.LevelOne.drawer.draw() не имеет никаких гарантий, что foreground-land.png загружен в этот момент (помните, изображения загружаются асинхронно, не блокируя выполнение другого кода).

Ваш onload функция для объекта изображения в вашем classLevel класс пуст и анонимен. Ничего не происходит, когда изображение заканчивается загрузка. Я не уверен, как вы хотите структурировать свой код, учитывая все остальное, что у вас есть, но вы должны только разрешить вызов game.LevelOne.drawer.draw() добиться успеха, если ресурсы, от которых он зависит, были полностью загружены. Лучший способ сделать это - подключиться к onload обратный вызов для всех ресурсов, необходимых для этого объекта (в данном случае это всего лишь одно изображение).

Источник

Загрузка изображений - это асинхронная операция, вы (в основном) игнорируете процесс загрузки и действуете так, как будто это операции синхронизации.

Одна вещь, на которую вы могли бы обратить внимание, это использовать третий параметр в качестве обратного вызова ("LevelOne", "images/foreground-land.png", function() { this.drawer.draw() }) и сделать это в качестве загрузки

Источник
Другие вопросы по тегам