两个不同的图像onLoad [英] Two different image onLoad

问题描述

目前我每次运行动画时只有一个图片onLoad。

Currently I only have one image onLoad everytime when i run my animation.

var imgFish = new Image();
imgFish.onload = init;
imgFish.src = 'Image';

我尝试让两个或多个不同的图片同时加载。

I'm try to make two or more different image to load at the same time.

当我按添加鱼！按钮时，我只有一条橙色的鱼在画布上移动。我想在画布上做更多不同的鱼游泳。我创建了另一个名为添加不同颜色的鱼的按钮，我想添加一个鱼，但使用相同的代码，以允许鱼在画布上动画。

I have only one orange fish moving on the canvas when i press on the 'Add a fish!' button. I want to make more different fish swimming on the canvas too. I have created another button called 'Add a different color fish!', I want to add a fish but with a different image with the same code to allow the fish to animation on the canvas.

任何人都知道我该如何实现呢？

Anyone knows how can i achieve it?

推荐答案

请参阅 http://jsfiddle.net/qx3tq5bL/1/

您的代码需要一个图像对象在Fish的构造函数中创建一个新的鱼。因此你需要做两件事情：

Your code requires a image object to create a new fish in the constructor of Fish. Thus you need to do 2 things:

首先，创建一个指向不同颜色的鱼的不同图像的新图像对象

First, Create a new image object pointing to a different image of a fish of different color

var imgFish2 = new Image();
imgFish2.onload = init;
imgFish2.src = 'https://dl.dropboxusercontent.com/s/0q7o0i23xmz719m/FishStrip.png';

其次，在函数init中将新功能绑定到新按钮：

Second, Bind function to your new button in function init:

document.getElementById("button1").onclick = function() {
  // create another fish using the Fish class
  var anotherFish = new Fish(xPos, yPos, speedX, speedY, imgFish2, frameWidth, frameHeight);
  // put this new fish into the fishes[] array
  fishes.push(anotherFish) ;
  // make it start changing directions
  anotherFish.changeDirection();
  // draw this new fish
  anotherFish.drawFish();
}

这篇关于两个不同的图像onLoad的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！