围绕一个圆圈的文字动画

Question

所以我的代码在我不添加rotate（）代码时有效，但是当我添加它时，它会以我的名字的J旋转，更多的是风车效果。我希望文本围绕一个圆圈旋转。

这是我的

我该如何解决这个问题呢？

CODE

function showCircularNameRotating(text,x,y,radius,space,top){
var w = canvas.width,
    h = canvas.height,
    cx = w * 0.5,                 
    cy = h * 0.5,
    angleStep = 0.1,
    txt = 'Justin Esders';

           space = space || 0;
           var numRadsPerLetter = (Math.PI - space * 2) / text.length;
 context.save();
           context.translate(x,y);
           var k = (top) ? 1 : -1; 
           context.rotate(-k * ((Math.PI - numRadsPerLetter) / 2 - space));
           for(var i=0;i<text.length;i++){
              context.save();
              context.rotate(k*i*(numRadsPerLetter));
              context.textAlign = "center";
             context.textBaseline = (!top) ? "top" : "bottom";
             context.fillText(text[i],0,-k*(radius));
              context.restore();
           }
           context.restore();
           (function rotate() {
    context.clearRect(0, 0, canvas.width, canvas.height);     
    context.translate(cx, cy);         
    context.rotate(angleStep);         
    context.translate(-cx, -cy);       
    context.fillText(txt, cx, cy);     
    requestAnimationFrame(rotate); 
})();



        }

样本用法

showCircularNameRotating("Justin Esders",150,150,75,Math.PI/12);