HTML Canvas Animation Move In Geometric Spiral

Description

HTML Canvas Animation Move In Geometric Spiral

View in separate window 

<!doctype html>
<html lang="en">
<body>
  <canvas id="canvasOne" width="500" height="500">
 Your browser does not support the HTML 5 Canvas. 
</canvas>/*from w  w w . j a v a 2 s . co  m*/


  <script type="text/javascript">
    function drawScreen() {
      context.fillStyle = '#EEEEEE';
      context.fillRect(0, 0, theCanvas.width, theCanvas.height);
      //Box
      context.strokeStyle = '#000000';
      context.strokeRect(1, 1, theCanvas.width - 2, theCanvas.height - 2);

      ball.x = circle.centerX + Math.cos(circle.angle) * circle.radius;
      ball.y = circle.centerY + Math.sin(circle.angle) * circle.radius;
      circle.angle += ball.speed;
      circle.radius += radiusInc;

      context.fillStyle = "#000000";
      context.beginPath();
      context.arc(ball.x, ball.y, 15, 0, Math.PI * 2, true);
      context.closePath();
      context.fill();

    }

    let radiusInc = 2;
    let circle = {
      centerX : 250,
      centerY : 250,
      radius : 2,
      angle : 0,
      radiusInc : 2
    }
    let ball = {
      x : 0,
      y : 0,
      speed : .1
    };
    let points = new Array();

    theCanvas = document.getElementById('canvasOne');
    context = theCanvas.getContext('2d');

    function gameLoop() {
      window.setTimeout(gameLoop, 20);
      drawScreen()
    }

    gameLoop();
  </script>

</body>
</html>



PreviousNext

Related