0

HTML5 キャンバスに多数の画像を表示する Web ページがあります。

JavaScript を使用してキャンバスに描画する前に、最初に HTML の非表示セクションに画像をロードしています。これは、画像をロードしてキャンバスにレンダリングするのにかかる時間を短縮するためです。

すべての画像がキャンバスに描画されたら、キャンバス上でドラッグ アンド ドロップできる必要があります。キャンバスには 4 つの「説明バケット」も表示されるため、ユーザーは各画像を対応する説明バケットにドラッグする必要があります。

HTML に画像をロードしたら、JavaScript によってアクセスおよび操作されている間、それらを格納する JavaScript 配列を作成します。つまり、JavaScript 画像であるかのように操作できるようにしたいのですが、それらのソースは、画像の直接のソースではなく、HTML 要素になります。

http://www.html5canvastutorials.com/labs/html5-canvas-animals-on-the-beach-game-with-kineticjs/のチュートリアルに従っています。画像は静的です。私のゲームでは、管理者がゲームを使用しているコンテキストに応じて表示される画像を変更するために使用できる Web フォームを提供します。

これが、そのチュートリアルにコードがある理由です。

window.onload = function() {
    var sources = {
      beach: "beach.png",
      snake: "snake.png",
      snake_glow: "snake-glow.png",
      snake_black: "snake-black.png",
      lion: "lion.png",
      lion_glow: "lion-glow.png",
      lion_black: "lion-black.png",
      monkey: "monkey.png",
      monkey_glow: "monkey-glow.png",
      monkey_black: "monkey-black.png",
      giraffe: "giraffe.png",
      giraffe_glow: "giraffe-glow.png",
      giraffe_black: "giraffe-black.png",
    };
    loadImages(sources, initStage);
  };

ソースを、HTML の非表示セクションにロードした画像のソースに変更したい:

<section hidden>
<img id="startButton" src="images/startButton.png" alt="Start Button" width="179" height="180" href="javascript:drawLevelOneElements();"/>

<img id="building" src="images/assets/building.png" alt="Asset" />
<img id="chair" src="images/assets/chair.gif" alt="Asset" />
<img id="drink" src="images/assets/drink.gif" alt="Asset" />
<img id="food" src = "images/assets/food.gif" alt="Asset"/>
<img id="fridge" src = "images/assets/fridge.png" alt="Asset"/>
<img id="land" src = "images/assets/land.jpg" alt="Asset"/>
<img id="money" src = "images/assets/money.jpg" alt="Asset"/>
<img id="oven" src = "images/assets/oven.jpg" alt="Asset"/>
<img id="table" src = "images/assets/table.gif" alt="Asset"/>
<img id="van" src = "images/assets/van.jpg" alt="Asset"/>

<img id="burger" src = "images/expenses/direct/burger.png" alt="Direct Expense"/>
<img id="chips" src = "images/expenses/direct/chips.png" alt="Direct Expense"/>
<img id="drink" src = "images/expenses/direct/drink.jpg" alt="Direct Expense"/>
<img id="franchiseFee" src = "images/expenses/direct/franchiseFee.jpg" alt="Direct Expense"/>
<img id="wages" src = "images/expenses/direct/wages.jpg" alt="Direct Expense"/>

<img id="admin" src = "images/expenses/indirect/admin.jpg" alt="Indirect Expense"/>
<img id="cleaners" src = "images/expenses/indirect/cleaners.gif" alt="Indirect Expense"/>
<img id="electricity" src = "images/expenses/indirect/electricity.gif" alt="Indirect Expense"/>
<img id="insurance" src = "images/expenses/indirect/insurance.jpg" alt="Indirect Expense"/>
<img id="manager" src = "images/expenses/indirect/manager.jpg" alt="Indirect Expense"/>
<img id="rates" src = "images/expenses/indirect/rates.jpg" alt="Indirect Expense"/>
<img id="training" src = "images/expenses/indirect/training.gif" alt="Indirect Expense"/>
<img id="water" src = "images/expenses/indirect/water.gif" alt="Indirect Expense"/>

<img id="burger" src = "images/income/burger.png" alt="Income"/>
<img id="chips" src = "images/income/chips.png" alt="Income"/>
<img id="drink" src = "images/income/drink.jpg" alt="Income"/>

<img id="creditors" src = "images/liabilities/creditors.gif" alt="Liability"/>
<img id="electricity" src = "images/liabilities/electricity.png" alt="Liability"/>
<img id="food" src = "images/liabilities/food.jpg" alt="Liability"/>
<img id="hirePurchase" src = "images/liabilities/hirePurchase.jpg" alt="Liability"/>
<img id="loan" src = "images/liabilities/loan.png" alt="Liability"/>
<img id="overdraft" src = "images/liabilities/overdraft.jpg" alt="Liability"/>
<img id="payeTax" src = "images/liabilities/payeTax.jpg" alt="Liability"/>
<img id="tax" src = "images/liabilities/tax.jpg" alt="Liability"/>
</section>

しかし、HTML 画像を参照する方法がわかりません。ソースから直接 JavaScript で画像を参照する方法と同様の方法で試してみました。

window.onload = function(){
    var sources = {
        asset1: document.getElementById("building");
        asset2: document.getElementById("chair");
    }
}

しかし、ブラウザーにページをロードすると、キャンバスが表示されなくなりました。これまでのところ、このコードを使用してキャンバスの周りにドラッグアンドドロップできる1つの画像を使用して、キャンバスを表示することができました:

var canvasImage = new Kinetic.Image({
      image: imageObj,
      width: 50,
      height: 50,
      // puts the image in teh middle of the canvas
      x: stage.getWidth() / 2 - 50 / 2,
      y: stage.getHeight() / 2 - 50 / 2,
      draggable: true
    });

var imageObj = new Image();
  imageObj.onload = function() {
    drawImage(this);
  };
  imageObj.src = 'images/assets/building.png';

しかし明らかにこれの問題は、「Building.png」から描画された画像の src を他の画像ファイルに変更できるフォームを管理者に提供した場合、 HTML の非表示セクションに「建物」イメージをロードしている行に、代わりに新しいイメージをロードする行を追加します。

JavaScript 内から HTML 画像を参照する方法を知っている人はいますか?

編集 2012 年 10 月 12 日 @ 21:00

コードを次のように変更してみました。

var sources = {
        asset1: document.getElementById("building"),
        asset2: document.getElementById("chair")
    }

しかし、ブラウザでページを表示すると、キャンバスがまだ表示されませんでした。2行目以降にコンマを入れてみたのですが、キャンバスが表示されませんでした。

編集 2012 年 10 月 12 日 @ 22:55

私は今、この機能を持っています:

window.onload = function(){
    var sources = {
        asset1: document.getElementById("building").src,
        asset2: document.getElementById("chair").src,
    };
    loadImages(sources, drawImage);
};

次のコードを使用して、キャンバスに画像を描画してみてください。

var imageObj = new Image();
  imageObj.onload = function() {
    drawImage(this);
  };
  imageObj.src = sources.asset1;

しかし、何らかの理由で、キャンバスがブラウザに表示されなくなりました...ブラウザに表示されてから変更したのは、次の行だけです。imageObj.src = sources.asset1;

4

1 に答える 1

0

あなたのコード

var sources = {
    asset1: document.getElementById("building");
    asset2: document.getElementById("chair");
}

構文エラーを生成します。プロパティの宣言は、セミコロンではなくコンマで終わる必要があります (最初のオブジェクト宣言で正しく行ったように)。

そのコードを試したときにキャンバスが消えたのは、スクリプト インタープリターが構文エラーで停止したためです。

編集：

DOM の画像要素を使用して最初のオブジェクト (画像 URL 文字列を持つもの) を再作成する場合はsrc、各要素のプロパティを取得します。

var sources = {
    asset1: document.getElementById("building").src,
    asset2: document.getElementById("chair").src
}
于 2012-12-10T20:46:51.003 に答える