animation with createjs - Javascript Canvas

Javascript examples for Canvas:Animation

  1. HOME
  2. Javascript
  3. Canvas
  4. Animation

Description

animation with createjs

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.createjs.com/createjs-2014.12.12.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){// w  w w.ja v a 2 s  .  c o m
var c = createjs;
var offset = 729469300;
var x = 0;
c.Ticker.setFPS(30);
c.Ticker.on("tick", tick);
tick();
function tick(evt) {
    x++;
    var ctx = foo.getContext("2d");
    ctx.clearRect(0,0,600,400);
    ctx.save();
    ctx.transform(1,0,0,1,-offset,0);
    ctx.save();
    ctx.transform(1,0,0,1,offset+x,0);
    ctx.fillStyle = "blue";
    ctx.fillRect(0,0,100,100);
    ctx.restore();
    ctx.restore();
}
    }

      </script> 
   </head> 
   <body> 
      <canvas id="foo" width="600" height="400" style="background:#eee"></canvas> 
      <div id="out">
         hello
      </div>
   </body>
</html>

Related Tutorials