Question

我使用了一段非常简单的代码（但显然我的图像代替了Image.png）。我试图给我的画布一个背景图像。

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);

编辑：我道歉，我看到你正在把它画到画布对象上。在这种情况下，我怀疑你的图像无法正确加载。

一些想法：您可以在start（）函数中添加一些调试输出或设置断点，然后查看＆＃39; img＆＃39;包含在那个时间点。或者您可以查看“网络”中的状态代码。 devtools控制台的选项卡。或者您可以使用已知可行的图像替换图像，例如www.google.com/images/logo.png。这一切都应该让你缩小范围。

注意：window是一个全局变量，所以你不应该声明它，而window的属性名称，如window.document也是全局变量 - 可以被引用为document没有声明。有时JS框架会抱怨，但有一些特定于框架的方法可以解决这个问题。这些变量的重复声明不是一条好的路径。

如果您要添加这些内容以响应ESlint错误，则应将eslintrc.json添加到项目根目录（如果您还没有），并为其提供以下属性，以便它并不抱怨浏览器全局：

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

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

Answer 2

在设置图片onload之前，请尝试设置src回调。

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

如果图片已缓存，则onload会在设置src后立即触发start，即在#Msg,00000 #Msg,00001 #Msg,00002 #Msg,00003 #Msg,00004 #Msg,00005 #Msg,00006 #Msg,00007 #Msg,00008 #Msg,00009 #Msg,00010 #Msg,00011 see this question分配之前。

错误：图像未定义（使用Image（）函数时出现问题）

2 个答案: