javascript - ( Canvas )每隔几秒推送一个新项目

Question

您好，感谢您提前提供的帮助。

我试图每隔几秒钟推送/创建一个新的“环”。我有一个带有 X 和 Y 几个变量的环。我遇到的问题是，如何获得一个新环并增加变量？我需要为每个环指定一个新的变量名称？ 以下是我到目前为止所取得的进展:

http://codepen.io/hossman/pen/AfwkF

您可以在演示中看到 1 个环如何熄灭，但我希望不止 1 个环从我的眼睛中消失。例如，1 个环消失，然后等待一秒钟，然后射出另一个环，所以现在 Canvas 上有 2 个环，然后是 3 个，然后是 4 个，等等......我想到了多种方法，例如使用数组和setTimeouts，但我无法确定它。我唯一的另一个想法是创建多个具有不同名称的变量，并让每个环递增，但这不是很 D.R.Y。

有什么帮助吗？

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

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

在这里 fork : http://codepen.io/anon/pen/plBmj (看起来很好记!)