Заполните круг javascript в срезах

Question

Я хочу, чтобы круг был похож на круговую диаграмму с равными кусочками разных цветов. По какой-то причине я рисую круг, с дугами на стороне с цветами, с белым восьмиугольником в центре.

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(); 
} 

Answer 1

Проблема заключается в том, что когда вы рисуете дугу, которая меньше, чем полный круг, все, что он делает это создает только дугу, и ограничивающий его с собой, а не с центром. Однако, если мы вынудим его переместиться в центр, тогда он будет рисовать срез в противоположность дуге. Я продемонстрировал это JSFiddle.

Обновленный код этого

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(); 
}