슬라이스에서 자바 스크립트 서클 채우기

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