divide a circle into three equal parts - Javascript Canvas

Javascript examples for Canvas:Circle

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

Description

divide a circle into three equal parts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>circle divide</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*from w ww  .j a  va 2s.  c  o  m*/
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var RADIUS = 300;
var num_sections = 19; //set this for number of divisions
function drawCircle(x, y, r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.stroke();
}
function drawAngledLine(x, y, length, angle) {
  var radians = angle / 180 * Math.PI;
  var endX = x + length * Math.cos(radians);
  var endY = y - length * Math.sin(radians);
  ctx.beginPath();
  ctx.moveTo(x, y)
  ctx.lineTo(endX, endY);
  ctx.closePath();
  ctx.stroke();
}
//draw circle outline
drawCircle(320, 320, RADIUS);
//loop the number of sections to draw each
for (i = 1; i <= num_sections; i++) {
  drawAngledLine(320, 320, RADIUS, i * (360 / num_sections));
}
    });

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

Related Tutorials