CSS 및 Javascript에서 테두리가 구분 된 원을 만드는 방법은 무엇입니까?

Question

저는 HTML/CSS와 Javascript의 새로운 브랜드입니다. 나는 codeacademy의 튜토리얼을 살펴 보았지만, 너무 근본적이었고 내가 성취해야 할 과제에 도움이되지 않는다는 것을 알게되었습니다.

기본적으로 내가하려는 것은 테두리에 12 개의 분할 된 부분이있는 원을 만드는 것입니다. 내가 원하는 무엇을 발견 가장 가까운 것은 다음과 같다 : 그것은 8 개 부분으로 나누어 져

http://jsfiddle.net/hywrc3qv/

ctx = $('#c')[0].getContext('2d'); 


function update(E) { 
ctx.clearRect(0, 0, 224, 224); 
if (E === false) { 
    mx = 112; 
    my = 112; 
} else { 
    mx = E.pageX - $('#c').offset().left; 
    my = E.pageY - $('#c').offset().top; 
} 

mangle = (-Math.atan2(mx-112, my-112)+Math.PI*2.5)%(Math.PI*2); 
mradius = Math.sqrt(Math.pow(mx - 112, 2) + Math.pow(my - 112, 2)); 

$('#i').val("Not over any region"); 
$('#link').attr('href', ''); 
for (i = 0; i < 8; i++) { 
    angle = -Math.PI/8 + i * (Math.PI/4); 

    if (((mangle > angle && mangle < (angle + Math.PI/4)) || (mangle > Math.PI*15/8 && i==0)) && mradius<=112 && mradius>=69) { 
     ctx.fillStyle="#5a5a5a"; 
     $('#i').val("In region "+i); 
     $('#link').attr('href', '#'+i); 
    } else { 
     ctx.fillStyle="#4c4c4c"; 
    } 

    ctx.beginPath(); 
    ctx.moveTo(112, 112); 
    //ctx.lineTo(112+Math.cos(angle)*112, 112+Math.sin(angle)*112); 
    ctx.arc(112, 112, 112, angle, angle + Math.PI/4, false); 
    ctx.lineTo(112, 112); 
    ctx.fill(); 


} 

ctx.fillStyle = "#f2f2f2"; 
ctx.beginPath(); 
ctx.arc(112, 112, 69, 0, 2 * Math.PI, false); 
ctx.fill(); 
} 

update(false); 

것을 제외하고. 계산을 이해하는 데 어려움을 겪고 있으며 각 분할 된 세그먼트에 액세스하여 색상을 변경하거나 애니메이션을 적용하는 것이 가능할 것입니다.

누군가 올바른 방향으로 나를 가리켜 주시겠습니까?

Answer 1

솔직히 말해서, 나는 모든 계산을 반드시 알 필요가 없습니다.

나는 약간의 비웃기를했고, 여기에 숫자를 꽂을 수있는 수정 된 버전이 있습니다. 그러면 많은 조각이있는 원이 생깁니다.

자바 스크립트

size = num 
hSize = num/2 

:

기본적으로, 난 그냥 num의 새로운 인수 다음과 같은 변수를 사용하여 새로운 숫자를 8의 모든 인스턴스를했다 후 4의 교체 JSFiddle