RequestAnimationFrame to draw using arc() - Javascript Canvas

Javascript examples for Canvas:Animation

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

Description

RequestAnimationFrame to draw using arc()

Demo Code

ResultView the demo in separate window 

<html>
   <head></head>
   <body>
      <header> 
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
      </header>  
      <style type="text/css">

#canvas1 {/*from w w  w. j av a2  s. c o m*/
   transform: rotate(268deg);
}


      </style> 
      <canvas id="canvas1" width="100" height="100"></canvas> 
      <script>
       var p = 75;
       var i = 0;
      function draw() {
         var can = document.getElementById('canvas1');
         var context = can.getContext('2d');
         if (i < 75) {
            i += 1;
         }
         var percentage = i / 100; // no specific length
         var degrees = percentage * 360.0;
         var radians = degrees * (Math.PI / 180);
         console.log("percentage: " + percentage);
         var x = 50;
         var y = 50;
         var r = 30;
         var s = 0;//1.5 * Math.PI;
    context.clearRect(0,0,can.width,can.height);
         context.beginPath();
         context.lineWidth = 5;
         context.arc(x, y, r, s, radians, false);
         //context.closePath();
         context.stroke();
           requestAnimationFrame(draw);
      }
      requestAnimationFrame(draw);
       
      </script>  
   </body>
</html>

Related Tutorials