Question

您好，谢谢您的帮助。

我试图每隔几秒钟推/创一个新的“响铃”。我有一个带有X和Y几个变量的环。我遇到的问题是，如何获得一个新的环并增加变量？每个戒指我都需要一个新的变量名称？到目前为止我已经走了多远：

你可以在演示中看到1戒指是怎么出来的，但是我想要超过1个戒指离开我的眼睛。所以例如1环然后它等待一秒然后射出另一个环，所以现在画布上有2个环，然后是3个，然后是4个等等....我想过多种方式，比如使用数组和setTimeouts，但我不能指责它。我唯一的另一个想法就是创建具有不同名称的多个变量，并使每个环增加，但这不是非常D.R.Y。

Anyhelp？

如果我解释不够好，请提问。再次感谢！

Answer 1

将此添加到顶部的全局变量（并设置为您想要的圆圈之间的距离）：

var distanceApart = 40;

然后像这样更新你的主循环：

requestAnimationFrame(function print() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    var leftRing = new Ring(x, y);
    var rightRing = new Ring(x2, y2);
    var temp = startRadius;
    var temp2 = 0;

    while(temp > 0){
         leftRing.draw(ctx, startRadius - temp2 , 'red');
         rightRing.draw(ctx, startRadius - temp2 , 'red');   
         temp2 = temp2 + distanceApart;
         temp = temp - distanceApart;
    }

    startRadius += increase;

    requestAnimationFrame(print);
});

在这里分叉： http://codepen.io/anon/pen/plBmj （看起来非常记忆！）

Answer 2

我会重写部分代码来启用此功能。例如，我会按如下方式重写您的Ring类：

var Ring = defclass({
    constructor: function (x, y, r) {
        this.x = x;
        this.y = y;
        this.r = r;
    },
    draw: function (context) {
        context.beginPath();
        context.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        context.stroke();
        return this;
    },
    addRadius: function (r) {
        return new Ring(this.x, this.y, this.r + r);
    }
});

您的Ring类构造函数现在需要x，y和半径r。 addRadius函数返回一个新的Ring而不是改变原始的defclass。这很好，因为不变性使您的代码更易于使用。哦，function defclass(prototype) { var constructor = prototype.constructor; constructor.prototype = prototype; return constructor; }被声明为：

var radius = 10;
var delta = 0.1;

var left = new Ring(cx - (cx / 3.6), cy - 5, radius);
var right = new Ring(cx + (cx / 3.6), cy - 10, radius);

然后我们为你的眼睛创造两个戒指：

var interval = 50 / 3;
var start = Date.now();
loop(start, [left, right]);

之后我们调用动画循环：

1000 / 60

由于我们希望以60 FPS进行播放，因此间隔为50 / 3，可以简化为function loop(last, rings) { var next = last + interval; context.clearRect(0, 0, width, height); var newRings = rings.map(function (ring) { return ring.draw(context).addRadius(delta); }); var now = Date.now(); setTimeout(loop, next - now, next, Math.floor((now - start) / 1000) === rings.length / 2 ? [left, right].concat(newRings) : newRings); }。动画循环定义如下：

loop

以下是发生的事情：

首先我们清除屏幕。
然后我们绘制所有戒指并增加它们的尺寸。
如果已经过了一秒钟，我们会在阵列中添加两个新的响铃。
最后，我们计算何时再次致电interval，以便在正确的{{1}}之后触发。

请参阅演示：http://jsfiddle.net/LAr76/

（画布）每隔几秒钟推一个新项目

2 个答案: