blazerix blazerix - 2 months ago 6
CSS Question

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?

Answer

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