Javascript - 画布 - drawImage 不起作用答案

【问题标题】：Javascript - canvas - drawImage does not workJavascript - 画布 - drawImage 不起作用
【发布时间】：2013-06-26 03:32:59
【问题描述】：

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

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

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

谢谢！

【问题讨论】：

game.hero.onload 未定义，尝试更改顺序。先定义draw函数，然后赋值。

标签： javascript html canvas drawimage

【解决方案1】：

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

function draw() 
{
  //COde here
}

通过写作

game.draw = function(){};

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

【讨论】：

【解决方案2】：

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

game.hero.onload = game.draw;

当 game.draw 未定义时，因此您的 onload 未定义并且图像加载完成后不会发生任何事情。

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：