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

2 comments:

  1. I 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

Blogroll

Follow this blog by Email

Popular Posts