0

我有一个网页将在 HTML5 画布上显示许多图像。

在使用 JavaScript 在画布上绘制它们之前，我首先将图像加载到 HTML 的隐藏部分中，以加快它们加载和呈现在画布上的时间。

一旦所有图像都被绘制到画布上，就必须可以在画布周围拖放它们。目的是在画布上同时显示四个“描述桶”，用户需要将每个图像拖到其对应的描述桶中。

一旦我在 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");
    }
}

但是当我在浏览器中加载页面时，我的画布不再显示。到目前为止，我已经设法让画布显示出来，一张可以使用以下代码在画布周围拖放的图像：

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")
    }

但是在浏览器中查看页面时，我的画布仍然没有显示。我还在第二行后用逗号尝试过，但没有显示画布。

编辑 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 回答