旋转图8-在时间间隔中将路径保留在屏幕上

Question

我希望围绕中心点旋转的图8可以以一定频率沿圆自身打印（并停留在该位置）。

我需要查看屏幕上印刷的重叠部分，并围绕其轨道绘制其图案。

requestAnimationFrame(animate);


function animate(){
    requestAnimationFrame(animate);
    ctx.beginPath();
    ctx.arc(cx,cy,10,0,Math.PI*2);
    ctx.closePath();
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.fill();
    ctx.save();
    ctx.translate(cx,cy);
    ctx.rotate(rotation);

    ctx.beginPath();

    for (var t = 0.0; t < 15; t += 0.1){
        console.log(x, y);
        x = Math.sin(t)*20 + 150;
        y = Math.sin(a * t + b)*20 + 150;
        dy = Math.cos(a * t + b) * a;
        ctx.lineTo(x, y);
        if (dy < 0.1 && dy > -0.1)
          ctx.fillRect(x,y,0,0);
        ctx.stroke();
}
    ctx.restore();

    rotation+=Math.PI/50;
}

我启动了一个Codepen https://codepen.io/braydendevito/pen/zQEJjz

我猜想它需要一个循环，但是我似乎无法使其正常工作。

我很感激。