draw circle with javascript

How to draw a Circle using HTML 4, CSS2,Javascript ,jQuery

here we learn how to draw a basic circle with HTML div, CSS2, jQuery . Basic concept behind this scenario is Maths .

We must know some basic circle equation to find the x, y co ordintates of the cicle perimeter. any point on circle can be denoted as trigonametry equation as shown below. here Javascript function accepts in radians. next how many points we need to draw the circle ,we can draw as many points we want.

Concept :

x=centerX+radius*Math.sin(angle);
y=centerY+radius*Math.cos(angle);

function getCirclePoints(centerX,centerY,radius,segments){
var totalPoints=new Array();
for(var i=0;i<segments;i++){
x=centerX+radius*Math.sin(i*2*Math.PI/segments);
y=centerY+radius*Math.cos(i*2*Math.PI/segments);
totalPoints.push({'x':x,'y':y});
}
return totalPoints;
}

In the above function we decide how many points or segments we need. we should give radius and center point of the circle.

Click Demo how it works instntly.

See the animation effect with above function