javascript - 如何在 CSS 和 Javascript 中创建一个带有分隔边框的圆圈？

Question

所以我对 HTML/CSS 和 Javascript 是全新的。我浏览了 codeacademy 的教程，但发现它们太基础了，对我必须完成的任务没有帮助。

我基本上想做的是在边框中创建一个由 12 个分割部分组成的圆。我发现最接近我想要的东西如下:

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

除了分为8个部分。我在理解计算以及如何访问每个分割段并更改颜色(或什至为其设置动画)时遇到了一些麻烦。

有人能给我指出正确的方向吗？

Answer 1

老实说，我不一定知道其中的所有计算。

我做了一些修改，这是一个修改后的版本，您可以将任何数字插入其中，它会创建一个包含那么多切片的圆圈。

基本上，我获取了 8 的所有实例，然后是 4 的所有实例，并将它们替换为新数字，仅使用 num 的新参数> 和以下变量:

JavaScript

size = num
hSize = num / 2

JSFiddle