时间戳

首页 > 解决方案 > 使用可变参数时的 JavaScript drawImage 加载问题

javascript - 使用可变参数时的 JavaScript drawImage 加载问题

问题描述

我正在关注“使用 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() 函数，所以它没有正确加载？如果是这样，我如何使用这些变量正确加载图像？谢谢你。

标签： javascripthtml5-canvasdrawimage

解决方案

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

推荐阅读