0

我正在尝试在 jQuery 中创建一个应用程序（我是新手），其中圆圈每秒随机出现在画布中。我在 for 循环中生成它们，但不知道如何在经过一段时间后使它们出现。我尝试使用 setInterval() 和 delay() 但它不起作用（我认为我的语法写得不好）。对不起，如果这个问题太基本了。

这是我的代码：

var canvas, ctx;
var circles = [];
var selectedCircle;
var hoveredCircle;

function Circle(x, y, radius){
    this.x = x;
    this.y = y;
    this.radius = radius;
}

function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawCircle(ctx, x, y, radius) { // draw circle function
    ctx.fillStyle = 'rgba(255, 35, 55, 1.0)';
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
}

$(function(){
    canvas = document.getElementById('scene');
    ctx = canvas.getContext('2d');

    var circleRadius = 15;
    var width = canvas.width;
    var height = canvas.height;

    var circlesCount = 60; // we will draw 60 circles randomly
    for (var i=0; i<circlesCount; i++) {
        var x = Math.random()*width;
        var y = Math.random()*height;    
        circles.push(new Circle(x,y,circleRadius));
        drawCircle(ctx, circles[i].x, circles[i].y, circleRadius);
    }
});

谢谢你的帮助！

编辑：这里有几个不起作用的例子：

delay(1000) // after drawing function
drawCircle(ctx, circles[i].x, circles[i].y, circleRadius).delay(1000);
setInterval(drawCircle(ctx, circles[i].x, circles[i].y, circleRadius) {
}, 2000);
drawCircle(ctx, circles[i].x, circles[i].y, circleRadius).delay(1000).setInterval(1000);
4

3 回答 3

2

您需要重组代码（不能使用for循环），以便可以从setInterval()回调函数中绘制每个圆圈，如下所示：

$(function(){
    canvas = document.getElementById('scene');
    ctx = canvas.getContext('2d');

    var circlesCount = 60; // we will draw 60 circles randomly
    var circleRadius = 15;
    var width = canvas.width;
    var height = canvas.height;

    function makeCircle() {
        var x = Math.random()*width;
        var y = Math.random()*height;    
        var c = new Circle(x,y,circleRadius);
        circles.push(c);
        drawCircle(ctx, c.x, c.y, circleRadius);
        if (circles.length >= circlesCount) {
            clearInterval(interval);
        }
    }

    var interval = setInterval(makeCircle, 1000);
    makeCircle();
});

延迟时间的量作为 的第二个参数setInterval()。我在这里设置了 1000 毫秒（1 秒），但你可以使用任何你想要的值。如果您希望延迟时间是随机的，那么您将使用重复调用来setTimeout()代替，setInterval()并且您将为每个setInterval()调用生成随机时间量。

可以像这样生成两个值之间的随机整数：

function randomBetween(low, high) {
    return (Math.floor(Math.random() * (high - low)) + low);
}

因此，如果您希望圆圈在 100 毫秒到 1000 毫秒之间的随机时间出现，那么您的代码将如下所示：

$(function(){
    canvas = document.getElementById('scene');
    ctx = canvas.getContext('2d');

    var circlesCount = 60; // we will draw 60 circles randomly
    var circleRadius = 15;
    var width = canvas.width;
    var height = canvas.height;

    function makeCircle() {
        var x = Math.random()*width;
        var y = Math.random()*height;    
        var c = new Circle(x,y,circleRadius);
        circles.push(c);
        drawCircle(ctx, c.x, c.y, circleRadius);
        if (circles.length < circlesCount) {
            setTimeout(makeCircle, randomBetween(100, 1000));
        }
    }

    makeCircle();
});

注意：在这两个代码块中，我通过查看 circles.length 重组了您跟踪圈数的方式，因为它是您创建的圈数的自然、预先存在的计数器。

于 2013-01-14T16:19:14.377 回答
1

尝试以下解决方案。阅读评论了解更多详情

$(function(){
    canvas = document.getElementById('scene');
    ctx = canvas.getContext('2d');

    var circleRadius = 15;
    var width = canvas.width;
    var height = canvas.height;
    var timer, index = 0;

    var circlesCount = 60; // we will draw 60 circles randomly
    for (var i=0; i<circlesCount; i++) {
        var x = Math.random()*width;
        var y = Math.random()*height;    
        circles.push(new Circle(x,y,circleRadius));
    }

    // draw one circle per second
    timer = setInterval(function(){
        // exit loop when there's no more circles to draw
        if(index >= circles.length) {
             // also clear the timer
             clearInterval(timer);
             return;
        }

        drawCircle(ctx, circles[index ].x, circles[index ].y, (hoveredCircle == index) ? 25 : 15);
        // go to next circle
        index += 1;
    }, 1000);
});
于 2013-01-14T16:13:29.827 回答
1

假设圆圈正确添加到画布，您需要将超时放在 for 循环中。For 循环将尽可能地立即执行所有内容，因此随机间隔它们可能是您的答案：

setTimeout(function(){
    //-- code that adds circles here --//
}, ( Math.floor(Math.random()*11) * 1000 ) );

( Math.floor(Math.random()*11) * 1000 )在 0 到 10 之间生成一个随机数，将其乘以 1000，然后将循环延迟该时间。

试一试。

于 2013-01-14T16:13:48.427 回答