If you want draw a circle then you can use Html-5 Canvas programming or raphael.js or paper.js. But if you want place elements in a Circle then you have to generate coordinates for the Circle. In this article I am going to draw circle with Midpoint Circle algorithm. Find more about Midpoint circle algorithm at http://en.wikipedia.org/wiki/Midpoint_circle_algorithm
CSS :
#circle { position:relative; margin:auto; width:400px; height:400px; vertical-align:center; } #circle b { position:absolute; color:rgb(91,111,135); }
jQuery :
x0, y0 : Center of the Circle
radius : Radius of the Circle
radiusError : This is to calculate value for X - Coordinate.
x, y : Variables to calculate Coordinates.
var x0=200,y0=200; var radius=200; var x = radius, y = 0; var radiusError = 1-x; while(x >= y) { drawPixel(x + x0, y + y0); drawPixel(y + x0, x + y0); drawPixel(-x + x0, y + y0); drawPixel(-y + x0, x + y0); drawPixel(-x + x0, -y + y0); drawPixel(-y + x0, -x + y0); drawPixel(x + x0, -y + y0); drawPixel(y + x0, -x + y0); y++; if(radiusError<0) radiusError+=2*y+1; else { x--; radiusError+=2*(y-x+1); } } function drawPixel(mx,my) { $("#circle").append("<b style='left:"+mx+"px;top:"+my+"px'>.</b>"); }
!!!
ReplyDelete