当我在另一个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 onl oad="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”中为null .js文件“？
顺便说一下,这是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：值无法转换为以下任何一种：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都包装在脚本文件本身内的窗口的load事件中,以防您无法或不想将它们移到底部：
window.addEventListener('load', function() {
/// init the resource here...
}, false);
标签：javascript,html5,canvas,drawimage 来源： https://codeday.me/bug/20191013/1908724.html