Question

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

我在页面上有一个画布（#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函数：这就是为什么在定义它之前无法调用它：）

Answer 2

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

game.hero.onload = game.draw;

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

Answer 3

在第二个示例中指定

game.draw时，未将其设置为hero.onload。

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

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

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

Javascript - canvas - drawImage不起作用

3 个答案: