1

（我将在下面展示纯 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.
...

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

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] Why is it null in the“Resources.js”？

顺便说一下，这是火狐。

Javascript

渲染.js：

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

资源.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()

4

1 回答 1

1

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

方法一

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

方法二

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

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

    /// init the resource here...

}, false);
于 2013-07-29T00:32:54.800 回答