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

2023-12-01

（我将在下面展示纯 JavaScript）我有这两行代码，在我看来，它们执行完全相同的操作，但其中一行报告错误。这出现在名为“Rendering.coffee”的文件中。这是两行（在咖啡脚本中）：

...
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]为什么“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()

您可以尝试通过两种方式解决这个问题 -

Method 1

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

Method 2

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

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

    /// init the resource here...

}, false);

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)