HTML5 Game - Create animation frame

  1. HOME
  2. HTML5 Game
  3. Canvas Animation
  4. Testing Browser Animation Performance

Description

Create animation frame

Demo

ResultView the demo in separate window 

<!doctype html>
<html>
<body>
<canvas id="canvas" width="700" height="500"></canvas>
<script>
class Ball {//w w w.ja v a  2  s. com
  constructor(radius, color){
      this.radius = radius;
      this.color = color;
      this.x = 0;
      this.y = 0;
      this.vx = 0;
      this.vy = 0;
  }
  draw(context) {
    context.fillStyle = this.color;
    context.beginPath();
    context.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true);
    context.closePath();
    context.fill();  
  }

}


let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d'); 
let ball;
 
window.onload = init; 
 
function init() {
  ball = new Ball(20,"#0000ff");
  ball.x = 50; ball.y = 250;
  ball.vx = 2;
  ball.draw(context);
  animFrame();
};

function animFrame(){
  requestAnimationFrame(animFrame,canvas);
  onEachStep();
}
 
function onEachStep() {
  ball.x += ball.vx; 
  context.clearRect(0, 0, canvas.width, canvas.height);  
  ball.draw(context); 
};
   
  </script>
</body>
</html>

Related Topic