Javascript-canvas-drawImage不起作用

Javascript - canvas - drawImage does not work

本文关键字：不起作用 Javascript-canvas-drawImage      更新时间：2023-09-26

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

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

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

谢谢！

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

function draw() 
{
  //COde here
}

通过编写

game.draw = function(){};

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

在您的第二块代码中，您定义了

game.hero.onload = game.draw;

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

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

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

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

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

相关文章：