HTML5 Game - Draw circle and sector

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Drawing Using Paths

Description

Draw circle and sector

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
   <head>
      <style> 
         body {//from  ww  w . j  a va  2s .c  om
            background: #dddddd;
         }

         #canvas {
            position: absolute;
            left: 0px;
            top: 0px;
            margin: 20px;
            background: #ffffff;
            border: thin solid #aaaaaa;
         }
      </style>
   </head>

  <body>
    <canvas id='canvas' width='500' height='500'>
      Canvas not supported
    </canvas>

    <script>
let context = document.querySelector('#canvas').getContext('2d');
let circle = function(cx,cy,r) { 
  context.moveTo(cx+r,cy); 
  context.arc(cx,cy,r,0,Math.PI*2.0,0); 
}; 
let sector = function(cx,cy,r, 
    startAngle,endAngle, anticlockwise 
  ) { 
  context.moveTo(cx,cy); 
  context.arc( 
    cx,cy,r, 
    startAngle*(Math.PI/180.0), 
    endAngle*(Math.PI/180.0), 
    anticlockwise 
  ); 
  context.closePath(); 
}; 

context.beginPath(); 
circle(30,40,50); 
circle(30,40,60); 
circle(30,40,20); 
sector(155,40,50,-90,30,0); 
sector(150,40,80,30,150,0); 
sector(155,40,30,150,270,0); 
context.stroke(); 
       </script> 

      </script>
  </body>
</html>

Related Topic