javascript - 错误: Image is not defined (trouble using Image() function)

Question

我使用了一段非常简单的代码(但显然是用我的图像而不是 Image.png)。我正在尝试为我的 Canvas 提供背景图像。

var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");

var img = new Image();
img.onload=start;
img.src="Image.png";
function start(){
ctx.drawImage(img,0,0);
}

但我收到此错误: 错误:“图像”未定义。 [no-undef]关于该部分:

var img = new Image().

我尝试用

替换它

var img = document.createElement("img");

然后错误消失了，但没有任何显示，没有任何图像，它只是空的。有人知道我做错了什么吗？提前致谢!

完整代码

var document;
var ctx;
var window;

window.onload = function () {
   start();
}

function start(){

  var canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");


  var img = document.createElement("img");
  img.src="image.png";
  img.onload=start;

  function start(){
    ctx.drawImage(img,0,0,400,400);
  }
}

Answer 1

您需要将创建的图像附加到 DOM。

document.getElementById("image-container").appendChild(img);

编辑:抱歉，我看到您正在将其绘制到 Canvas 对象上。在这种情况下，我怀疑您的图像无法正确加载。

几个想法:您可以在 start() 函数中添加一些调试输出或设置断点，然后查看“img”在该时间点包含的内容。或者您可以在开发工具控制台的“网络”选项卡上检查状态代码。或者，您可以将该图像替换为已知有效的图像，例如 www.google.com/images/logo.png。这一切应该可以帮助您缩小问题范围。

注意:window 是一个全局变量，因此您不应声明它，并且名称是 window 的属性，例如 window.document 也是全局变量 - 可以作为 document 引用而无需声明。 JS 框架偶尔会提示，但有一些特定于框架的方法可以解决这个问题。重复声明这些变量并不是一个好的方法。

如果您添加这些内容是为了响应 ESlint 错误，您应该将 eslintrc.json 添加到您的项目根目录(如果您还没有)，并为其提供以下属性，以便它不会提示浏览器全局变量:

{
  "env": {
    "browser": true
  }                                                                      
}

至于为什么没有定义 Image，这在现代浏览器环境中不会发生。它必须与您的环境设置有关。您可以提供有关如何运行此代码的任何信息吗？