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

遅延時間の量は、の2番目の引数になりsetInterval()ます。ここでは1000ms（1秒）にしましたが、任意の値を使用できます。遅延時間をランダムにしたい場合は、setTimeout()の代わりに繰り返し呼び出しを使用し、呼び出しsetInterval()ごとにランダムな時間を生成しsetInterval()ます。

2つの値の間の乱数は、次のように生成できます。

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

円がキャンバスに正しく追加されていると仮定すると、タイムアウトを 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 に答える
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 に答える