HTML Canvas Animation Falling ball

Description

HTML Canvas Animation Falling ball

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>// ww w  .ja v  a  2  s .c o  m

<script type="text/javascript">
canvasApp();
function canvasApp() {
    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);
    
    // Create ball
    
    y += speed;
    
      context.fillStyle = "#000000";
    context.beginPath();
    context.arc(x,y,15,0,Math.PI*2,true);
    context.closePath();
    context.fill();
  }
  
  
    theCanvas = document.getElementById('canvasOne');
  context = theCanvas.getContext('2d');
  
  var speed = 5;
  var y = 10;
  var x = 250;
  
  function gameLoop() {
      window.setTimeout(gameLoop, 20);
      drawScreen()  
  }
  gameLoop();
}


</script>


</body>
</html>



PreviousNext

Related