Javascript-canvas-drawImage 不起作用

Question

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

我在页面上有一个 Canvas (#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);
}

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

谢谢!

Answer 1

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

function draw() 
{
  //COde here
}

通过书写

game.draw = function(){};

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