当我在另一个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);

原文地址:https://codeday.me/bug/20191013/1908724.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法