HTML5画布如何将圆分割成X部分

Question

我需要将圆分割成 X 个部分，没有白色中心

I have already this code: http://jsfiddle.net/U2tPJ/78/ 我得到这个结果：

我需要这样的完成结果（没有白色中心）：

Answer 1

因为你想要的是填充圆的一部​​分，所以使用 fill()，而不是描边()。

\n\n

\xe2\x80\xa2 您要绘制的形状（饼图）从圆心开始：

\n\n

ctx.moveTo(x,y);\n

\n\n

然后沿着弧线走：

\n\n

 context.arc(x, y, radius, i*pieAngle, (i+1)*pieAngle, false);\n

\n\n

然后填充()。

\n\n

\xe2\x80\xa2 请注意，segmentDepth您使用的实际上是一个角度。为了澄清我用过：

\n\n

// size of a pie : it is an angle in radians\nvar pieAngle = 2 * Math.PI / hours;\n

\n\n

\xe2\x80\xa2 最后，我使用 hsl 颜色轻松获得每小时不同的一堆颜色：

\n\n

    var hueValue = i * 15;\n    context.fillStyle = \'hsl(\' + hueValue + \',70%, 60%)\';\n

\n\n

结果看起来是这样的：

\n\n

\n\n

绘制代码

\n\n

function drawSegments(radius) {\n    for (var i = 0; i < hours; i++) {\n        context.beginPath();\n        context.moveTo(x, y);\n        context.arc(x, y, radius, i*pieAngle, (i+1)*pieAngle, false);\n        context.lineWidth = segmentDepth;\n        var hueValue = i * 15;\n        context.fillStyle = \'hsl(\' + hueValue + \',70%, 60%)\';\n        // \'#\'+(Math.random()*0xFFFFFF<<0).toString(16);\n        context.fill();\n        context.lineWidth = 2;\n        context.strokeStyle = \'#444\';\n        context.stroke();\n    }\n}\n

\n\n

小提琴： http: //jsfiddle.net/gamealchemist/U2tPJ/79/

\n