Question

我正在尝试从画布上随机抽取多个图像。我无法找到一种方法来迭代数组并在函数从for循环调用draw（）时绘制。

这就是我所拥有的

// Call Draw particles
      for (var i = 0; i < particles.length; i++) {
        particles[i].draw(i);
      };

和draw（）

Particle.prototype.draw = function(i) {
        imgs = new Image();
        if (i<20){
            imgs.src = imgArray[1];
            ctx.drawImage(imgs ,this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY);
        }else if(i>20 && i<50 ){
            imgs.src = imgArray[2];
            ctx.drawImage(imgs ,this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY);
        }else if(i>50 && i<100){
            imgs.src = imgArray[3];
            ctx.drawImage(imgs ,this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY);
        }else{
            imgs.src = imgArray[4];
            ctx.drawImage(imgs ,this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY);
        }
    };

我知道我需要找到一种方法来循环imgArray而不使用if else但我不知道怎么做？

提前致谢..

编辑：这是使用@mintychai建议的codepen演示codepen

Answer 1

我假设您想为每个粒子使用imgArray的随机图像，而现在您根据它们在粒子阵列中的位置为粒子提供粒子。

另外假设您imgArray中有4张图片。

Particle.prototype.draw = function(i) {
    imgs = new Image();
    var randomNumber = Math.floor((Math.random() * 4) + 1);
    imgs.src = imgArray[randomNumber];
    ctx.drawImage(imgs ,this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY);
};

Math.random()会为您提供一个随机数，而您正在寻找的内容是＆＃34;获取两个值之间的随机整数＆＃34;在这个资源中。

HTML5画布中的多个随机图像

1 个答案: