0

我有一个非常快速的问题。在我的 html 脚本标签中，我有一个 Box() 函数，用作 5 个盒子的类。

我正在创建这样的盒子

    var boxes = new Array();

    for (var i = 0; i < 5; i++) {

        var d = 50;
        var y = Math.random() * 250;

        boxes[i] = new Box(d, y, d, 255);
    }


    function Box(x, y, dimension, color) {

        this.x = x;
        this.y = y;
        this.dimension = dimension;
        this.color = color;
    }

    Box.prototype.draw = function (ctx) {

        ctx.fillStyle = "rgba(0,100,0,1)";

        ctx.fillRect(this.x, this.y, this.dimension, this.dimension);

        this.x += 5;
    }

像这样画盒子

    function draw() {

        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        ctx.save();

        //CLEAR THE CANVAS
        ctx.clearRect(0, 0, 550, 400);

        for (var i = 0; i < boxes.length; i++) {

            var box = boxes[i];

            box.draw(ctx);

            if (box.x > 500) {

                var index = array.boxes(box);
                boxes.splice(index, 1);
            }
        }

        ctx.restore();
    }

    //DRAW ALL BOXES EVERY 30 FRAME
    var loopTimer = setTimeout('draw();', 30);

盒子画得很好，但是对象的x没有增加，有人能告诉我为什么吗？

4

1 回答 1

0

是什么让你认为它x不会增加？实际上，您的问题是您使用setTimeout的是setInterval.

演示

//DRAW ALL BOXES EVERY 30 FRAME
var loopTimer = setInterval(draw, 300);
于 2013-09-07T15:59:57.203 回答