Previous post is simple example of usage MozOrientation. But now i use Matrix of rotate and i have nice animation.

You can read many information about Matrix of rotate here. These methods are used in game development, make animations and many others.

  1. var context = drawingCanvas.getContext('2d');
  2.  
  3. var xc = 75;
  4. var yc = 75;
  5. var xi = 0;
  6. var yi = 0;
  7.  
  8. var myImage = new Image();
  9.  
  10. var angle = (Math.PI/2)*-o.x;
  11. myImage.onload = function() {
  12.     context.clearRect(0,0,150,150);
  13.     context.save();
  14.    
  15.     xi = xi*Math.cos(angle)-yi*Math.sin(angle)-xc;
  16.     yi = yi*Math.sin(angle)+yi*Math.cos(angle)-yc;
  17.    
  18.    
  19.     context.translate( xc , yc);
  20.    
  21.     context.rotate(angle);
  22.     context.scale(1+o.y,1+o.y);
  23.     context.drawImage(myImage, xi, yi);
  24.    
  25.     context.restore();
  26. }
  27. myImage.src = "feedme.png";

Result:

Your browser doesn’t support canvas.