SKero2004 01 июля 2018 0

Когда создается новое изображение, image.width возвращает 0

SKero2004 / 01 июля 2018

Код ниже говорит, что spike.image.width = 0. Почему это? Я, наверное, упускаю что-то очевидное.

class Spike {
  constructor(x = 200, y = 200) {
    this.x = x;
    this.y = y;
    this.image = new Image();
    this.image.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIBO-v6hQoEBhzmZ05mKzgYqrsZ0svgsED7IDR4dIVNxc78uc2";
  }
}

const ctx = document.getElementById("canvas").getContext("2d");
const spike = new Spike;
console.log(spike.image.width);

<!DOCTYPE html>
<html>
    <head>
        <link href="css/default.css" rel="stylesheet" />
    </head>
    <body>
        <canvas id="canvas" width="400" height="600"></canvas>
        <script src="js/main.js"></script>
    </body>
</html>

1 Ответ

DoomTay / 01 июля 2018

Когда срабатывает console.log, изображение еще не загружено полностью. Вы должны проверить, когда изображение загрузилось

const spike = new Spike;
spike.image.onload = function()
{
    console.log(spike.image.width);
}

...