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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var context = drawingCanvas.getContext('2d');

var xc = 75;
var yc = 75;
var xi = 0;
var yi = 0;

var myImage = new Image();

var angle = (Math.PI/2)*-o.x;
myImage.onload = function() {
     context.clearRect(0,0,150,150);
     context.save();
     
     xi = xi*Math.cos(angle)-yi*Math.sin(angle)-xc;
     yi = yi*Math.sin(angle)+yi*Math.cos(angle)-yc;
     
     
     context.translate( xc , yc);
     
     context.rotate(angle);
     context.scale(1+o.y,1+o.y);
     context.drawImage(myImage, xi, yi);
     
     context.restore();
}
myImage.src = "feedme.png";

Result:

Your browser doesn’t support canvas.