1

(以下に純粋な JavaScript を示します) この 2 行のコードはまったく同じことを行っていると思いますが、そのうちの 1 行でエラーが報告されます。これは、「Rendering.coffee」という名前のファイルに表示されます。これが2行です（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 なのですか?

ちなみにファイアフォックスです。

Javascript

レンダリング.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()

4

1 に答える 1

1

この2つの方法を解決しようとすることができます -

方法 1

スクリプトをファイルの末尾の終了タグの前に移動します</body>。このようにして、JavaScript が実行される前にすべての DOM 要素がロードされます。

方法 2

DOM 要素に依存するすべての init をwindow'sloadイベント内のスクリプト ファイル自体にラップするようにしてください。それらを一番下に移動できない場合、または移動したくない場合に備えてください。

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

    /// init the resource here...

}, false);
于 2013-07-29T00:32:54.800 に答える