Проблемы с загрузкой JavaScript drawImage при использовании переменных параметров - PullRequest
Новая
       35

Проблемы с загрузкой JavaScript drawImage при использовании переменных параметров

0 голосов
/ 26 мая 2018

Я следую инструкциям по коду из раздела «Создание изометрических игр в реальном времени с HTML5, CSS3 и Javascript».К сожалению, в коде, похоже, есть проблемы с отрисовкой изображений с переменными в качестве параметров. 

  var logoImg = new Image();

  // We want to resent the image so that it fills 50% of the browser window 
  // while maintaining its width/height aspect ratio
  var originalWidth = logoImg.width;
  logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
  logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);

  var logo = {
    img: logoImg,
    x: (canvas.width/2) - (logoImg.width/2),
    y: (canvas.height/2) - (logoImg.height/2)
  }

  logoImg.onload = function () {
    ctx.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);
  }

  logoImg.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

Замена 

ctx.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);

на 

ctx.drawImage(logoImg, 1, 1, 100, 100);

устраняет проблему.Правильно ли я считаю, что поскольку функция onload () вызывается до вычисления переменных, она загружается неправильно?Если да, то как мне правильно загрузить изображение, используя эти переменные?Спасибо.

1 Ответ

0 голосов
/ 26 мая 2018

Это ctx.drawImage(logoImg, 1, 1, 100, 100); это решило проблему только потому, что вы установили размер вручную.Основная проблема здесь: 

var originalWidth = logoImg.width;

Вы еще не logoImg.width или height, потому что изображение еще не загружено.

Вот полный исправленный пример (вот рабочий пример ): 

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');

var logoImg = new Image();

var logo = {
    img: logoImg,
    x: (canvas.width/2) - (logoImg.width/2),
    y: (canvas.height/2) - (logoImg.height/2)
}

logoImg.onload = function () {
    var originalWidth = logoImg.width;
    logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
    logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);
    //debugger;
    ctx.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);
}

logoImg.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
...