javascript - 多次将同一项目添加到 Canvas 上

Question

基本上我想要做的是在 Canvas 上创建一个“下雨效果”(目前看起来并不完全像下雨，但我稍后会对其进行排序)

到目前为止，这是我的 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();

基本上，它会在 Canvas 的随机 y 点和 x 点创建一个 10 x 10 的蓝色 block ，我需要做的是不断地将这个蓝色 block 反复添加到 Canvas 上。我尝试将这个 for 循环包含到“循环”函数中:

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

但这只是在随机点不断闪烁 block (我明白为什么，这是因为它不断覆盖变量并将其放置在新点)，有人能帮助我吗？我知道为此使用 jQuery 会更容易，但我只使用 JavaScript

这是目前的样子(没有 for 循环)提前致谢!

jsfiddle

Answer 1

改为创建一个矩形数组:

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

这样之前生成的不会被覆盖/销毁。