HTML5畫布中的多個隨機圖像

Question

我試圖從畫布上隨機繪製多個圖像。我不能找出一種方法來迭代數組，並繪製函數從for循環調用draw（）。

這是我

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

和平局（）

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，但我不知識？

在此先感謝..

編輯： 這裏是codepen演示codepen使用@mintychai建議

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()讓你一個隨機數，並正在「獲得兩個值之間的隨機整數」在這個資源的部分你要找的東西。