Добавить тот же элемент на холст несколько раз

Question

в основном то, что я пытаюсь сделать, это создать «дождливую эффект» на холсте (точно не смотреть, как дождь на данный момент, но я сортирую, что позже)

Это мой JavaScript до сих пор:

window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame  || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     window.oRequestAnimationFrame  || 
     window.msRequestAnimationFrame  || 
     function(callback){ 
      window.setTimeout(callback, 1000/60); 
     }; 
})(); 

var canvas = document.getElementById("canvas"); 
cx = canvas.getContext("2d"); 

function rectangle (x, y, w, h) { 
    var randomx = Math.floor(Math.random() * canvas.width - 50); 
    var randomy = Math.floor(Math.random() * canvas.height - 100); 
    this.x = randomx || x || 0; 
    this.y = randomy || y || 0; 
    this.w = w || 0; 
    this.h = h || 0; 

    this.draw = function() { 
     cx.fillStyle = "blue"; 
     cx.fillRect(this.x, this.y, this.w, this.h); 
    }; 
} 

var myRectangle = new rectangle(window.randomx, window.randomy, 10, 10); 

function loop() { 
    cx.clearRect(0, 0, canvas.width, canvas.height); 
    myRectangle.y++; 
    myRectangle.draw(); 
    requestAnimFrame(loop); 
} 

loop(); 

в основном, это создаст 10 по 10 синему блоку в случайных у и х точек холста, что мне нужно сделать, это держать добавить этот синий блок снова и снова на холст. Я попытался в том числе это цикл в функцию «петля»:

for (var i = 0; i < 20; i++) { 
    var myRectangle = new rectangle(window.randomx, window.randomy, 10, 10); 
} 

Но это только продолжает мигать блок в случайных точках (я понимаю, почему это происходит потому, что он держит перезапись переменных и поместить его в новой точке), сможет ли кто-нибудь помочь мне? Я знаю, что было бы проще использовать jQuery для этого, но я использую только JavaScript

Вот скрипка для того, как она выглядит на данный момент (без цикла for), заранее!

jsfiddle

Answer 1

Сделать массив прямоугольников вместо:

myRectangle[i] = new rectangle(...); 

Таким образом, ранее сформированные из них не будут перезаписаны/уничтожен.

Answer 2

Вот пример использования массива. Вы также хотите, чтобы убедиться, что вы удалите их, когда они с экрана (обратите внимание expired переменных)

http://jsfiddle.net/8Jqzx/2/

window.requestAnimFrame = (function(){ 
     return window.requestAnimationFrame  || 
       window.webkitRequestAnimationFrame || 
       window.mozRequestAnimationFrame || 
       window.oRequestAnimationFrame  || 
       window.msRequestAnimationFrame  || 
       function(callback){ 
       window.setTimeout(callback, 1000/60); 
       }; 
    })(); 

    var canvas = document.getElementById("canvas"); 
    cx = canvas.getContext("2d"); 

    function rectangle (x, y, w, h) { 
     var randomx = Math.floor(Math.random() * canvas.width - 50); 
     var randomy = Math.floor(Math.random() * canvas.height - 100); 
     this.x = randomx || x || 0; 
     this.y = randomy || y || 0; 
     this.w = w || 0; 
     this.h = h || 0; 
     this.expired = false; 

     this.draw = function() { 
      cx.fillStyle = "blue"; 
      cx.fillRect(this.x, this.y, this.w, this.h); 
     }; 
     this.update = function() { 
      this.y++; 
      if (y > canvas.height) { 
       this.expired = true; 
      } 
     } 
    } 

    var rectangles = new Array(); 

    function newRect() { 
     rectangles.push(new rectangle(window.randomx, window.randomy, 10, 10)); 
    } 

    var timing = 0; 

    function loop() { 
     cx.clearRect(0, 0, canvas.width, canvas.height); 
     if (timing%10 == 0) { 
      newRect(); 
     } 
     for (var i = 0; i < rectangles.length; i++) { 
      rectangles[i].update(); 
      rectangles[i].draw(); 
      if (rectangles[i].expired) { 
       rectangles.splice(i, 1); 
       i--; 
      } 
     } 
     timing++; 
     requestAnimFrame(loop); 
    } 

    loop(); 

Но в этом, вы их появляются в верхнем (более дождь подобный) : http://jsfiddle.net/8Jqzx/3/