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>"); }
!!!
ReplyDeleteI love this. It is soo informative. Are you also searching for cheap assignment help we are the best solution for you. We are best known for delivering the best services to students without having to break the bank
ReplyDelete