Animation KineticJS旋转/设置文本动画

我有一把小提琴，我把文本排列成一个圆圈，现在我想给它设置动画，并以顺时针/逆时针方向旋转文本

我看到的每个动画演示都使用容器作为起点，但是我能找到的所有关于以圆形排列操纵文本的示例都是从元素开始的。我已经尝试了100的变化，试图让这项工作，但我要么错过了一些东西，要么这是不可能的建设，我已经使用到目前为止

这是我到目前为止的循环文本的提琴：

var can=document.getElementById（'canvas1'）；
var ctx=can.getContext（'2d'）；

其中，动画示例以以下内容开始：

<div id="container"></div>
var stage = new Kinetic.Stage({container: 'container'});

var stage=new dynamic.stage（{container:'container'}）；

我愿意接受任何需要的想法/重写，因为我的最终目标是一个动画文本圈。 另外，如果这在KineticJS的替代品中很容易实现，我会有兴趣尝试一下。

一种有效的方法：

• 在屏幕外的画布上以圆形呈现文本

• 使用.toDataURL将屏幕外画布另存为图像

• 从屏幕外的图像创建一个动态图像

• 然后，您可以根据需要高效地旋转/设置Kinetic.图像的动画

---

以下是我使用KineticJS制作的演示：

var阶段=新的动力学阶段({
容器：'容器'，
宽度：500，
身高：500
});
var layer=新的动能层（）；
var myText=“圆圈中的我的文本。”；
var centerCoords={x:250，y:250}；
对于（var i=0；谢谢你，我会告诉你，tryI无法让小提琴在两台不同的机器上运行…我将代码带到并用它替换了其中一个示例，我在两台机器上进行了尝试，所以不确定发生了什么。但是它工作并且正在旋转。所以它在html5canvastutorials上工作？当你不能使用它时，请注意控制台中的错误让它工作。你可能有旧的lib或者甚至缺少一个库。
<div id="container"></div>
var stage = new Kinetic.Stage({container: 'container'});

var stage = new Kinetic.Stage({
    container: 'container',
    width: 500,
    height: 500
});

var layer = new Kinetic.Layer();

var myText = "My text in a circle. ";
var centerCoords = {x:250, y:250};

for(var i=0;i<myText.length;i++){
    var rotation = i*360/myText.length;
    var oneChar = new Kinetic.Text({
        x: centerCoords.x,
        y: centerCoords.y,
        text: myText[i],
        fontSize: 30,
        fontFamily: 'Calibri',
        fill: 'green',
        offset: {x:0, y:100},
        rotationDeg: rotation
    });
    layer.add(oneChar);
}

// add the layer to the stage
stage.add(layer);

var angularSpeed = Math.PI / 2;
var anim = new Kinetic.Animation(function(frame){
    var angleDiff = frame.timeDiff * angularSpeed / 1000;
    for(var i=0;i<layer.children.length;i++){
        layer.children[i].rotate(angleDiff);
    };
}, layer);
anim.start();