нагрузка не срабатывает и изображение не может быть нарисовано - PullRequest
Новая
       13

нагрузка не срабатывает и изображение не может быть нарисовано

0 голосов
/ 10 февраля 2019

onload не запускается в методе draw (), и мое изображение не рисуется на холсте.Я подтвердил, что путь правильный и изображение есть.

Я не могу найти, где проблема.Заранее спасибо за совет. 

class Game {
    constructor() {
        this.gameWidth = 600;
        this.gameHeight = 300;
        this.gravity = 0.7;
        this.canvasName = "gameBox";
        this.canvas = document.getElementById(this.canvasName)
        this.ctx = this.canvas.getContext('2d');
    }
    draw(image) {
        let img = document.createElement('IMG');

        this.ctx.fillStyle ='#F00';
        this.ctx.fillRect(0, 0, this.gameWidth, this.gameHeight);

        img.onload = function() {
            this.ctx.drawImage(img, 0, 0, image.width, image.height, image.xPos, image.yPos, image.width, image.height);
        }.call(this);

        img.src = image.imageFile;
    }
}
class Sprite {
    constructor(width, height, imageFile, xPos, yPos) {
        this.width = width;
        this.height = height;
        this.imageFile = imageFile;
        this.xPos = xPos;
        this.yPos = yPos;
        this.xVel = 0;
        this.yVel = 0;
    }
}

let game = new Game()
let elephant = new Sprite(21, 13, "./images/elephant.png", game.gameWidth / 2, game.gameHeight - 13);

game.draw(elephant);

ПРАВИЛЬНАЯ ВЕРСИЯ: Я переписал ее, принимая советы от guest271314, спасибо!Мне все еще кажется слишком сложным, но это работает. 

class Game {
    constructor() {
        this.gameWidth = 600;
        this.gameHeight = 300;
        this.gravity = 0.7;
        this.canvasName = "gameBox";
        this.canvas = document.getElementById(this.canvasName)
        this.ctx = this.canvas.getContext('2d');
    }
    drawSprite(image, img) {
          this.ctx.drawImage(img, 0, 0, image.width, image.height, image.xPos, image.yPos, image.width, image.height);
    }
    draw(image) {
	let img = document.createElement('IMG');

        this.ctx.fillStyle ='#F00';
        this.ctx.fillRect(0, 0, this.gameWidth, this.gameHeight);

        img.onload = this.drawSprite.bind(this, image, img);

        img.src = image.imageFile;
    }
}
class Sprite {
    constructor(width, height, imageFile, xPos, yPos) {
        this.width = width;
        this.height = height;
        this.imageFile = imageFile;
        this.xPos = xPos;
        this.yPos = yPos;
        this.xVel = 0;
        this.yVel = 0;
    }
}

let game = new Game()
let elephant = new Sprite(21, 13, "./images/elephant.png", game.gameWidth / 2, game.gameHeight - 13);

game.draw(elephant);

1 Ответ

0 голосов
/ 10 февраля 2019

.call() прикованный к функции является синтаксической ошибкой без скобок, заключающих в себе функцию.Обратный вызов load не должен вызываться до тех пор, пока обработчик load не отправит.Вы можете определить функцию с именем и использовать .bind()

function handleImgLoad() {
  // do stuff
}

img.onload = handleImgLoad.bind(this);
...