0

我已经阅读了所有其他类似的帖子，但我不明白为什么我有这个问题。

我在页面上有一个画布（#canvas）和一个图像（hero.png），并在正文末尾加载了一个 JS 文件。在 JS 代码中...

这有效：

var game = {};
game.canvas = document.getElementById('canvas');
game.ctx = game.canvas.getContext("2d");
game.draw = function(){
  game.ctx.drawImage(game.hero, 200, 200);
}
game.hero = new Image();
game.hero.src = "hero.png";
game.hero.onload = game.draw;

这不起作用：

var game = {};
game.canvas = document.getElementById('canvas');
game.ctx = game.canvas.getContext("2d");
game.hero = new Image();
game.hero.src = "hero.png";
game.hero.onload = game.draw;
game.draw = function(){
  game.ctx.drawImage(game.hero, 200, 200);
}

什么都没有出现。控制台没有错误。为什么？？？

谢谢！

4

3 回答 3

3

您只能使用以下语法在定义函数之前调用函数：

function draw() 
{
  //COde here
}

通过写

game.draw = function(){};

你为你的对象定义了一个方法，你没有定义一个 JavaScript 函数：这就是为什么你不能在定义它之前调用它:)

于 2013-06-25T19:06:32.130 回答
1

在您的第二段代码中，您正在定义

game.hero.onload = game.draw;

当 game.draw 未定义时，因此您的 onload 未定义，并且在图像加载完成后没有任何反应。

于 2013-06-25T19:07:20.780 回答
1

game.draw在第二个示例中分配时未设置，您将未定义的值复制到hero.onload.

一种解决方法是将要调用的函数包装在匿名函数中，然后从那里调用你的函数：

game.hero.onload = function(){ game.draw(); };

请记住，如果hero在定义game.draw完成之前加载，此代码将失败。

于 2013-06-25T19:08:10.813 回答