line around a circle - Javascript Canvas

Javascript examples for Canvas:Circle

  1. HOME
  2. Javascript
  3. Canvas
  4. Circle

Description

line around a circle

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
   <head> 
      <!-- reset css --> 
      <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
      <style>

body{ background-color: ivory; padding:50px; }
#canvas{border:1px solid red;}

      </style> 
      <script>
$(function(){/* w  ww  . j ava  2 s. c om*/
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var PI2=Math.PI*2;
    var cx=150;
    var cy=150;
    var r=100;
    ctx.arc(cx,cy,r,0,Math.PI*2);
    ctx.closePath();
    ctx.stroke();
    for(var a=0;a<PI2;a+=PI2/20){
        ctx.strokeStyle="blue";
        curve(a,PI2/2.5,25);
        ctx.strokeStyle="green";
        curve(a,PI2/5,50);
        ctx.strokeStyle="red";
        curve(a,PI2/10,75);
    }
    function curve(rotation,offset,innerRadius){
        var x1=cx+r*Math.cos(rotation);
        var y1=cy+r*Math.sin(rotation);
        var x2=cx+innerRadius*Math.cos(rotation+offset/3.5);
        var y2=cy+innerRadius*Math.sin(rotation+offset/3.5);
        var x3=cx+innerRadius*Math.cos(rotation+offset/1.5);
        var y3=cy+innerRadius*Math.sin(rotation+offset/1.5);
        var x4=cx+r*Math.cos(rotation+offset);
        var y4=cy+r*Math.sin(rotation+offset);
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        ctx.bezierCurveTo(x2,y2,x3,y3,x4,y4);
        ctx.stroke();
    }
    $("#stop").click(function(){});
}); // end $(function(){});

      </script> 
   </head> 
   <body> 
      <button id="stop">Stop</button>
      <br> 
      <canvas id="canvas" width="300" height="300"></canvas>  
   </body>
</html>

Related Tutorials