Canvas Kineticsjs使用Kinetic.Shape绘制圆弧

嗨，我想建立一个加载动画，其中一个甜甜圈图表正在变得越来越大。我需要用定制的形状来做这件事，因为我需要中间的洞来做其他动画。到目前为止，我得到的是：

var阶段=新的动力学阶段{ 容器：“加载器”， 宽度：600， 身高：200}

var层=新的动力学层

var循环=新的动力学循环{ x:stage.getWidth/2+200， y:stage.getHeight/2， 半径：70， 填写：'红色'}

var x=舞台宽度/2；var y=舞台高度/2；var半径=75； var startAngle=1.1*Math.PI；var endAngle=1.9*Math.PI；变量 逆时针=假

var arc=新的动力学形状{

sceneFunc: function(context) {
    context.beginPath();
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    context.closePath();
    // KineticJS specific context method
    context.fillStrokeShape(this);
},
fill: 'green',
stroke: 'red',
strokeWidth: 4 });

//将形状添加到层中

layer.addarc

//将层添加到stage.addlayer

如果有人能帮助我，那就太好了

---

这是我的小提琴：

你可以用动能形状画一个可调的弧线

演示：

首先创建一个圆弧：

var arc = new Kinetic.Shape({
  sceneFunc: function(context) {
    context.beginPath();
    context.beginPath();
    context.arc(this.cx,this.cy,this.radius,-PI2/4,PI2*this.arcPercent/100-PI2/4);
    // KineticJS specific context method
    context.fillStrokeShape(this);
  },
  stroke: 'green',
  strokeWidth:25
});

然后向该弧添加一些属性，这些属性定义弧的大小：

arc.cx=100;
arc.cy=100;
arc.radius=75;
arc.arcPercent=33;  // percent is 0-100

最后创建一个可用于调整圆弧扫掠的函数

function setArcPercent(percent){
    arc.arcPercent=percent;
    layer.draw();
}