html - 画 20 条弧来创建一个圆

Question

我遇到了一个问题。我正在尝试使用 Kineticjs 库从 20 个弧中创建一个圆。

问题：弧线不会出现在我的页面上......

我是这个图书馆的新手，所以我不知道我做错了什么。有人可以阅读下一页上的代码并帮助我吗？

http://jsfiddle.net/cMHv5/

Answer 1

问题是您正在覆盖 arc 变量。

要对此进行调试，您应该尝试添加一些 console.log 消息以准确查看您调用 Kineticjs 函数时使用的参数。

您的代码中此代码段的第一行和最后一行是问题所在：

var arc = Math.PI / (numbers.length/2);
for(var i = 0; i < numbers.length; i++) {
    (function() {
        var angle = startAngle + i * arc;
        var odd = i%2;
        var arc = new Kinetic.Shape({...});

[编辑添加另一个问题： ]

我建议简化您的示例并在使其更复杂之前正确绘制简单的弧线。现在您正在调用context.arc()创建路径，但实际上并没有绘制它 - 尝试调用context.stroke()和/或context.fill().

在那之后，我认为你需要看看你传递给的角度——我context.arc不确定你想要结果是什么样的，但我认为你没有正确计算角度。