Question

我正在关注“使用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（）函数在计算变量之前被调用，所以它没有正确加载？如果是这样，如何使用这些变量正确加载图像？谢谢。

Answer 1

这个ctx.drawImage(logoImg, 1, 1, 100, 100);解决了这个问题只是因为您手动设置了维度。主要问题在于：

var originalWidth = logoImg.width;

您尚未logoImg.width或height因为图片尚未加载。

这里是完整的更正示例（here a working example）：

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';

使用变量参数时，JavaScript drawImage加载问题

1 个答案: