两个不同的图像onLoad

本文介绍了两个不同的图像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?

推荐答案

请参阅 jsfiddle/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 = 'dl.dropboxusercontent/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(); }