@motyar

I'm Motyar, an entrepreneur and API developer from India

Creating value through Programming

DigitalOcean Cloud hosting for developers
20GB SSD, 512MB RAM - only $5 per month

Feb 27, 2010

Draw circle with Jquery

There are two past posts about drawing with jquery, In first post i implanted the freehand draw, in second we learned about drawing rectangle with jquery. Today i am with you with one another shape( Circle ). Let us see how we can draw circle with jquery.



As you know we can draw circle with css and rectangle with jquery. To be true i have mixed that two methodologies. Simply added one more property (radius) with rectangle.

Code


<script type="text/javascript"> 
$(document).ready(function() {
  var x1,x2,y1,y2;
  $(document).mousedown(function(e) {
  $("#current").attr({ 
                     id''
                     })
  box = $('<div style="border:1px #FF00FF solid;position:fixed;">').hide();
  $(document.body).append(box); 
 
  x1 e.pageX;
  y1 e.pageY;
  box.attr({id'current'}).css({
                                tope.pageY //offsets
                                lefte.pageX //offsets
                               }).fadeIn();
            });
 $(document).mousemove(function(e) {
   $("#current").css({
                     width:Math.abs(e.pageX x1), //offsets
                     height:Math.abs(e.pageY y1),//offsets
                     'border-radius':Math.abs(Math.abs(e.pageX x1) / 2),
                     '-moz-border-radius':Math.abs(Math.abs(e.pageX x1) / 2),
                     '-webkit-border-radius':Math.abs(Math.abs(e.pageX x1) / 2)
                   }).fadeIn();
                });
 $(document).mouseup(function() {
                             $("#current").attr({ id''
                         })
                 });
 });

</script>

Demo



See this code in action here. Drag mouse to draw.

Related posts

Freehand draw with Jquery
Drawing rectangle with Jquery

Labels:


By :