Canvas arc（）不接受变量？

好吧，我有这一段代码，试图创造在画布上支离破碎的“甜甜圈”形：Canvas arc（）不接受变量？

for (var i = 0; i < numberOfItems; i++) { 
    var endingAngle = (startingAngle + itemLength) % (2 * Math.PI); 

    menuItem[i] = new Kinetic.Shape({ 
     sceneFunc: function (context) { 
      context.beginPath(); 
      context.arc(containerCenter, containerCenter, circleRadius, startingAngle, endingAngle, false); 
      context.lineTo(containerCenter + smallCircleRadius * Math.cos(endingAngle), containerCenter + smallCircleRadius * Math.sin(endingAngle)); 
      context.arc(containerCenter, containerCenter, smallCircleRadius, endingAngle, startingAngle, true); 
      context.lineTo(containerCenter + circleRadius * Math.cos(startingAngle), containerCenter + circleRadius * Math.sin(startingAngle)); 
      context.closePath(); 

      context.fillStrokeShape(this); 
     }, 
     fill: '#00ff00', 
     stroke: 'black', 
     strokeWidth: 1 
    }); 

    layer.add(menuItem[i]); 
    startingAngle = endingAngle; 
}

startingAngle从该片断的外部设定和基本无关（可为任意值），numberOfItems是段的数量，itemLength每个片段的长度以圆周的百分比表示，circleRadius和smallCircleRadius分别表示圆环形状的外圈和内圈的半径。

现在，当我尝试按原样输入时，它不会在画布上绘制任何东西，只是一条线，它似乎是第一个片段的左侧线或右侧线最后一个片段 - 尽管这是不相关的。如果我将代码更改为常量值而不是startingAngle和endingAngle，它将起作用，并将其正确绘制。这里可能是什么问题？

来源

2014-04-09 user3515633

当Kinetic.Shape试图绘制自己时，您的startingAngle和endingAngle变量不再存在。

当for循环结束时，那些角度变量将从范围中消失。

要使角度可供sceneFunc您可以添加的角度特性的.Shape本身：

menuItem[i].startingAngle=startingAngle; 
menuItem[i].endingAngle=endingAngle;

然后你可以检索你的sceneFunc角度：

sceneFunc: function(ctx) { 
    var startingAngle=this.startingAngle; 
    var endingAngle=this.endingAngle 
    ...

演示：http://jsfiddle.net/m1erickson/465qY/

来源

2014-04-09 18:29:57 markE

祝福你，我会永远卡在这里。 – user3515633

Canvas arc（）不接受变量？

回答

相关问题