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();

基本上，它会在画布的随机y和x点创建一个10 x 10的蓝色块，我需要做的是不断将这个蓝色块一遍又一遍地添加到画布上。我尝试将这个for循环包含在'loop'函数中：

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/

多次将相同的项添加到画布上

2 个答案: