API actuelle : ~

Code WeCanPlay

WCP.setCanvas('canvas');

var mainView = new WCP.View({
  init: function () {
    var image = WCP.Filter.colorAdjust(WCP.Assets.get('ball'), [0, 0x55, 0]), 200, 200;  
    this.ball = new WCP.Sprite(image);  
    this.ball.setOrigin(WCP.Sprite.ORIGIN_CENTER);  
    this.add(this.ball);  
  },  
  loop: function () {  
    this.ball.rotation += IMG_ROTATION_SPEED * (this.elapsed() / 1000);  
  }  
});  
  
WCP.Assets.add('ball', IMG_SRC);  
WCP.Assets.load('*', null, function(){  
  mainView.start();  
});

Code Natif

window.requestAnimFrame = (function () {  
  return  window.requestAnimationFrame ||  
      window.webkitRequestAnimationFrame ||  
      window.mozRequestAnimationFrame ||  
      window.oRequestAnimationFrame ||  
      window.msRequestAnimationFrame ||  
      function (callback, element) {  
        window.setTimeout(callback, 1000 / 60);  
      };  
})();  
  
var canvas = document.getElementById('canvas');  
var ctx = canvas.getContext('2d');  
var image = document.createElement('img');  
  
var imgx = 100;  
var imgy = 100;  
var rotation = 0;  
var oldtime = 0;  
  
function draw_game() {  
  var delta = Date.now() / 1000 - oldtime;  
  
  ctx.clearRect(0, 0, canvas.width, canvas.height);  
  
  var tmpx = imgx + image.width / 2;  
  var tmpy = imgy + image.height / 2;  
  
  ctx.save();  
  ctx.translate(tmpx, tmpy);  
  ctx.rotate(rotation);  
  ctx.drawImage(image, - image.width / 2, - image.height / 2);  
  ctx.restore();  
  
  rotation += IMG_ROTATION_SPEED * delta;  
  
  oldtime = Date.now() / 1000;  
  window.requestAnimFrame(draw_game);  
}  
  
function launch_game() {  
  oldtime = Date.now() / 1000;  
  draw_game();  
}  
  
image.src = IMG_SRC;  
image.addEventListener('load', function() {  
  launch_game();  
});