将一个javascript圆圈分片填充

我希望这个圆类似于一个饼图，有相同的不同颜色的切片。出于某种原因，我画了一个圆，边上有弧，边上有颜色，中间有一个白色的八角形

for(var i=0;i<8;i++){
    ctx.beginPath();
    ctx.fillStyle= 'rgb(' + Math.floor(255-42.5*i) + ', 95, 180)';
    ctx.arc(300,300,radius,i*((Math.PI*2)/8),(i+1)*((Math.PI*2)/8)); 
    ctx.fill();
}

---

for（var i=0；i问题是，当你画一个小于一整圈的弧时，它所做的只是创建一个弧，并用它本身而不是中心来限定它。然而，如果我们强迫它移动到中心，那么它将绘制与弧相反的切片。我创建了一个例子来演示它

更新的代码如下所示

var ctx=document.getElementById("canvas").getContext("2d");
var radius=100;
for(var i=0;i<8;i++){
    ctx.beginPath();
    ctx.fillStyle='rgb(' + Math.floor(255-42.5*i) + ', 95, 180)';
    ctx.moveTo(300,300); //We have to add this, otherwise, it will fill the minimum area needed to fill the arc

    ctx.arc(300,300,radius,i*Math.PI/4,(i+1)*((Math.PI/4)),false); 
    ctx.closePath();
    ctx.fill();
}

var ctx=document.getElementById（“canvas”）.getContext（“2d”）；
var半径=100；
对于（var i=0；iSome）来说，更多的细节会更好。我真的看不到一个令人难以置信的问题陈述。这正是我的问题所在。谢谢！