的Javascript

Question

（我将在下面显示纯javascript）我有两行代码，在我看来，它们做的完全相同，但其中一行报告错误。它出现在名为“Rendering.coffee”的文件中。以下是两行（在coffeescript中）：

...
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”中的null？

顺便说一句，这是firefox。

的Javascript

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

Answer 1

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

方法1

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

方法2

尝试将所有依赖于window的{{1}}事件中的DOM元素的内容包装在脚本文件本身中，以防您不能或不想将它们移到底部：

load

当我在另一个javascript文件中引用图像时，drawImage不起作用

的Javascript

我首次尝试解决方案

1 个答案:

方法1

方法2