Question

我有一个非常快速的问题。在我的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没有增加，有人可以告诉我为什么吗？

Answer 1

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

DEMO

//DRAW ALL BOXES EVERY 30 FRAME
var loopTimer = setInterval(draw, 300);

Javascript更改对象值

1 个答案: