bisect the circle? - Javascript Canvas

Javascript examples for Canvas:Circle

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

Description

bisect the circle?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" circle of fifths></script> 
      <style id="compiled-css" type="text/css">

canvas {//  w  w w. jav a2 s . c  om
   border:1px solid black;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
function bisect(context, degrees, radius, cx, cy) {

    var x1 = cx + radius * Math.cos(degrees);
    var y1 = cy + radius * Math.sin(degrees);
    if (degrees > 2*Math.PI) {
        var degrees2 = degrees - Math.PI;
    } else {
        var degrees2 = degrees + Math.PI;
    }

    var x2 = cx + radius * Math.cos(degrees2);
    var y2 = cy + radius * Math.sin(degrees2);

    context.beginPath();
    context.moveTo(x1, y1)
    context.lineTo(x2, y2)
    context.stroke();
}
function draw(theCanvas) {
    var context = theCanvas.getContext('2d');
    // draw the big outer circle
    context.beginPath();
    context.strokeStyle = "#222222";
    context.lineWidth = 2;
    context.arc(250, 250, 220, 0, Math.PI * 360, false);
    context.stroke();
    context.closePath();
    // smaller inner circle
    context.beginPath();
    context.strokeStyle = "#222222";
    context.lineWidth = 1;
    context.arc(250, 250, 110, 0, Math.PI * 360, false);
    context.stroke();
    context.closePath();

    for (j=2; j < 360; j = j + 3) {
        bisect(context, j, 220, 250, 250);
    }
}
$(function () {
    var theCanvas = document.getElementById('the_canvas');
    console.log(theCanvas);
    draw(theCanvas, 50, 0, 270);
});
    });

      </script> 
   </head> 
   <body> 
      <canvas id="the_canvas" width="500" height="500"></canvas>  
   </body>
</html>

Related Tutorials