javascript - 当我在另一个javascript文件中引用图像时，drawImage无法正常工作

（我将在下面显示纯JavaScript），在我看来，这两行代码的作用完全相同，但是其中之一会报告错误。这将显示在名为“ Rendering.coffee”的文件中。这是两行（在coffescript中）：

...
ctx.drawImage(document.getElementById("bg"), 0, 0)  #this works
ctx.drawImage(root.resources.bg, 0, 0)  #TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.
...

我在另一个名为“ Resources.coffee”的文件中分配root.resources.bg，如下所示：

root = exports ? this
root.resources = {}

root.resources.bg = document.getElementById("bg")

这是加载所有代码的html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Canvas tutorial</title>

    <script src="Resources.js" type="text/javascript"></script>
    <script src="Rendering.js" type="text/javascript"></script>


    <style>
        canvas {
            border: 1px solid black;
        }
    </style>

</head>

<body onload="window['core'].startGame();">
<canvas id="canvas" width="640" height="480"></canvas>
<img id="bg" src="bg.png" style="display: none">

</body>
</html>

当我将渲染代码更改为此时，我没有错误：

root.resources.bg = document.getElementById("bg")
ctx.drawImage(root.resources.bg, 0, 0)

要么

bg = document.getElementById("bg")
ctx.drawImage(bg, 0, 0)

这让我认为这里根本上存在更多错误。创建画布上下文后，只能使用img标记吗？如果我更改“ Resources.js”以打印出bg变量的值，则打印为“ null”，但是如果我在“ Rendering.js”中打印它，则输出为[object HTMLImageElement]为什么在“ Resources.js”？

顺便说一下，这是Firefox。

Java脚本

Rendering.js：

...
ctx.drawImage(document.getElementById("bg"), 0, 0);
ctx.drawImage(root.resources.bg, 0, 0);
...

Resources.js：

// Generated by CoffeeScript 1.6.2
(function() {
  var root;

  root = typeof exports !== "undefined" && exports !== null ? exports : this;

  root.resources = {};

  root.resources.bg = document.getElementById("bg");

}).call(this);

TL; DR：在我的渲染功能之外分配图像时，为什么会出现此错误？ #TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.

我第一次尝试解决方案

这对我有用，但是我不确定这是否是一个好的解决方案：

root = exports ? this
root.resources = {}

bgResource = undefined

root.resources.bg = ->
  if not bgResource
    bgResource = document.getElementById("bg")
  return bgResource

然后我将此称为root.resources.bg()

最佳答案

您可以尝试解决这两种方法-

方法1

将脚本移到结束标记</body>之前的文件底部。这样，在执行任何JavaScript之前，将加载所有DOM元素。

方法二

尝试将所有依赖于DOM元素的init包裹在脚本文件本身内的window load事件中，以防万一您无法或不想将它们移到底部：

window.addEventListener('load', function() {

    /// init the resource here...

}, false);