CODEWITHSUNDEEP
javascriptjqueryhtmlcss
blazerix
blazerix

Reputation: 860

How to create a circle with divided borders in CSS and Javascript?

So I'm brand new to HTML/CSS and Javascript. I've gone through codeacademy's tutorials but found that they were too basic and did not help with the task that I have to accomplish.

What I basically am trying to do is create a circle with 12 divided parts in the border. The closest thing that I found to what I want is the following:

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

Except that it is divided into 8 parts. I'm having some trouble understanding the calculations and how it would be possible to access each divided segment and change the colour (or even animate it).

Could someone please point me in the right direction?

Upvotes: 1

Views: 144

Answers (1)

Caleb Anthony
Caleb Anthony

Reputation: 1123

To be honest, I don't necessarily know all the calculations that went into it.

I did some fiddling, and here's a modified version that you can plug any number into and it'll create a circle with that many slices.

Essentially, I took all the instances of 8 and then of 4 and replaced them with new numbers, just using a new argument of num and the following variables:

JavaScript

size = num
hSize = num / 2

JSFiddle

Upvotes: 1

Related Questions