Create circular movement with the setInterval function on canvas

A simple example of moving a circle in a circular motion on the canvas in Tizen 2.3 using the setInterval() function. 
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="600" height="300"></canvas>
    <script>

        var startX = 100;
        var startY = 100;
        
        var currentX = 0;
        var currentY = 0;
        
        var speed = 5;
        var radian = 0;
        var radius = 40;
        var degree = 0;
        
        var canvas = document.getElementById('myCanvas'); 
        var ctx = canvas.getContext('2d'); 
        
        var moveCircle = setInterval(animate, 10);
        
        function animate() {

                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                degree -= speed;
                radian = (degree/180) * Math.PI;
            
                currentX = startX + Math.cos(radian) * radius;
                currentY = startY - Math.sin(radian) * radius;
            
                ctx.fillStyle = 'green';
                ctx.beginPath(); 
                ctx.arc(currentX, currentY, 30, 0 * Math.PI, 2 * Math.PI); 
                ctx.fill();

            }

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

Responses

0 Replies