Question

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

我首先在HTML中的隐藏部分加载图像，然后使用JavaScript在画布上绘制它们，以加快加载和在画布上渲染它们所需的时间。

将所有图像绘制到画布后，必须可以将它们拖放到画布上。目的是在画布上也会显示四个“描述桶”，并且用户需要将每个图像拖动到相应的描述桶中。

一旦我在HTML中加载了图像，我想创建一个JavaScript数组来存储它们，同时它们被JavaScript访问和操作，即我希望能够像JavaScript一样操纵它们图像虽然它们的来源是HTML元素，但不是图像的直接来源。

我正在遵循以下教程：http://www.html5canvastutorials.com/labs/html5-canvas-animals-on-the-beach-game-with-kineticjs/这完全符合我的要求，但图像是静态的。在我的游戏中，我将提供一个网络表单，管理员将能够根据他们使用游戏的上下文来更改显示的图像。

这就是为什么该教程有代码的原因：

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图像？

编辑10/12/2012 @ 21:00

我尝试将代码更改为：

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

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

编辑10/12/2012 @ 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;

Answer 1

您的代码

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 }

如何在javascript中引用html图像

1 个答案: