JavaScript не удалось выполнить drawImage

Итак, я создаю игру с JavaScript Canvas Elements и тому подобное. Я был в состоянии загрузить в тоннах изображений, но на некоторых из них, JavaScript отвечает с ошибками, такими как

Uncaught TypeError: Не удалось выполнить 'drawImage' для 'CanvasRenderingContext2D': не найдено ни одной функции, соответствующей указанной подписи.

Что не имеет никакого смысла, потому что тот же код работает в других местах!?!

Вот пример, который я имею в своем коде:

board.drawImage(document.getElementById("player_explode"), this.x, this.y);

Внутри метода объектов, Player.die()соответственно.

Кто-нибудь знает, почему это происходит? Я очень расстраиваюсь из-за этого...

Вот JSFiddle, чтобы продемонстрировать, помимо всего кода.Player.die() находится на line[242],

Источник

3 ответа

Решение

Проблема была в том, как я загружал свои изображения, я должен был это сделать:

var image = new Image();
image.src = "imagesource.jpg";

Но вместо этого я получил элементы по идентификатору из document стр.

Ресурсы:

Пояснения по загрузке изображений

Объяснение того, как HTML загружает изображения

Источник

Вам следует дождаться загрузки всех элементов, так что сделайте так:

window.onload=function(){
       board.drawImage(document.getElementById("player_explode"), this.x, this.y);
}
Источник

Для тех, кто в 2021 году изучает React, вы должны позвонить в context.drawImage() в img.onloadили на холсте ничего не будет отображаться! Вот рабочий пример из реального мира:

      useEffect(() => {
    canvasRef.current.width = mapXYWH.w * UNIT
    canvasRef.current.height = mapXYWH.h * UNIT
    const context = canvasRef.current.getContext("2d")

    map.map(o => {
        const img = new Image(o.width*UNIT,o.height*UNIT)
        img.src = o.normal
        img.onload = () =>
            context.drawImage(img, (o.x-mapXYWH.x)*UNIT, (o.y-mapXYWH.y)*UNIT)
    })
}, [map, mapXYWH])

См. Также: React - Canvas не отображает изображение

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