AlexaShemetova
@AlexaShemetova
While I'm breathing - I love and believe

Как правильно выводить картинки в canvas?

В методе load есть закомментированная часть, это часть нормально выводит картинки, но чтобы избегать дублей пытаюсь тоже самое сделать через цикл и получаю в консоли NS_ERROR_NOT_AVAILABLE: ошибка на строке где выводится первая картинка в методе render, тут this.ctx.drawImage(this.sprites.background, 0, 0);

var game = {
    width: 640,
    height: 360,
    ctx: undefined,
    platform: undefined,
    sprites: {
        background: undefined,
        platform: undefined
    },
    init: function() {
        var canvas = document.getElementById('mycanvas');
        this.ctx = canvas.getContext('2d');
    },
    load: function() {
        for (var key in this.sprites) {
            this.sprites[key] = new Image();
            this.sprites[key].src = 'img/'+ key + '.png';
            console.log(this.sprites[key]);
        }

        // this.sprites.background = new Image();
        // this.sprites.background.src = 'img/bg-main.png';
        // this.sprites.platform = new Image();
        // this.sprites.platform.src = 'img/pl.png';
    },
    start: function() {
        this.init();
        this.load();
        this.run();
    },
    render: function() {
        this.ctx.clearRect(0, 0, this.width, this.height);
        this.ctx.drawImage(this.sprites.background, 0, 0);
        this.ctx.drawImage(this.sprites.platform, this.platform.x, this.platform.y, 100, 20);
    },
    run: function() {
        this.render();

        window.requestAnimationFrame(function() {
            game.run();
        });
    }
};
  • Вопрос задан
  • 117 просмотров
Решения вопроса 1
twobomb
@twobomb
Дело в том, что изображения выводить можно только после того, как они будут загружены.
Поэтому нужно немного модифицировать ваш код
//....
    load: function(callback) {
    		let loaded = 0;
        for (var key in this.sprites)
        	loaded++;
        for (var key in this.sprites) {
            this.sprites[key] = new Image();
            this.sprites[key].src = 'img/'+ key + '.png';
            this.sprites[key].onload = function(){
            if(--loaded <= 0)
            	callback();
            }            
        }
    },
    start: function() {
        this.init();
        this.load(this.run);
    },
//....
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы