HTML Canvas Animation acceleration

Description

HTML Canvas Animation acceleration

View in separate window 


<!DOCTYPE HTML>
<html>
<head>
<script>
  var Animation = function(canvasId) {
    this.canvas = document.getElementById(canvasId);
    this.context = this.canvas.getContext("2d");
    this.t = 0;//w w w. ja v a  2  s . co m
    this.timeInterval = 0;
    this.startTime = 0;
    this.lastTime = 0;
    this.frame = 0;
    this.animating = false;

    // provided by Paul Irish
    window.requestAnimFrame = (function(callback) {
      return window.requestAnimationFrame
          || window.webkitRequestAnimationFrame
          || window.mozRequestAnimationFrame
          || window.oRequestAnimationFrame
          || window.msRequestAnimationFrame || function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
    })();
  };

  Animation.prototype.getContext = function() {
    return this.context;
  };

  Animation.prototype.getCanvas = function() {
    return this.canvas;
  };

  Animation.prototype.clear = function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  };

  Animation.prototype.setDrawStage = function(func) {
    this.drawStage = func;
  };

  Animation.prototype.getFrame = function() {
    return this.frame;
  };

  Animation.prototype.start = function() {
    this.animating = true;
    var date = new Date();
    this.startTime = date.getTime();
    this.lastTime = this.startTime;

    if (this.drawStage !== undefined) {
      this.drawStage();
    }

    this.animationLoop();
  };

  Animation.prototype.stop = function() {
    this.animating = false;
  };
  Animation.prototype.getTimeInterval = function() {
    return this.timeInterval;
  };

  Animation.prototype.getTime = function() {
    return this.t;
  };

  Animation.prototype.animationLoop = function() {
    var that = this;

    this.frame++;
    var date = new Date();
    var thisTime = date.getTime();
    this.timeInterval = thisTime - this.lastTime;
    this.t += this.timeInterval;
    this.lastTime = thisTime;

    if (this.drawStage !== undefined) {
      this.drawStage();
    }

    if (this.animating) {
      requestAnimFrame(function() {
        that.animationLoop();
      });
    }
  };
    window.onload = function(){
        var anim = new Animation("myCanvas");
        var canvas = anim.getCanvas();
        var context = anim.getContext();
        
        var gravity = 2; // pixels / second^2
        var box = {
            x: canvas.width / 2 - 50,
            y: 0,
            vx: 0,
            vy: 0,
            width: 100,
            height: 50
        };
        
        anim.setDrawStage(function(){
            // update
      if (this.getTime() > 1000) {
                var speedIncrementEachFrame = gravity * anim.getTimeInterval() / 1000; // pixels / second
                box.vy += speedIncrementEachFrame;
                box.y += box.vy * this.getTimeInterval();
                
                if (box.y > canvas.height - box.height) {
                    box.y = canvas.height - box.height;
                    this.stop();
                }
      }
            
            // clear
            this.clear();
            
            // draw
            context.beginPath();
            context.fillStyle = "blue";
            context.fillRect(box.x, box.y, box.width, box.height);
        });
        
        anim.start(); 
    };
</script>
</head>
<body>
  <canvas id="myCanvas" width="600" height="250"
    style="border: 1px solid black;">
        </canvas>
</body>
</html>



PreviousNext

Related