html5 холст - эмулировать 3d вращение изображения

Question

У меня есть изображение, которое имеет квадратную форму. Я хочу, чтобы повернуть и сжать его, чтобы получить 3D-эффект, как на изображениях ниже:

Источник изображения:

Поворот на 0 градусов и выдавить:

Поворот на 45 градусов и сожмите:

Нечто подобное.

Я играл Math и пытался изменить Width и Height изображения путем умножения на Sin и Cos угла.

var w = image.width*Math.cos(angle* TO_RADIANS); 
var h = image.height*Math.sin(angle* TO_RADIANS); 
h=h*2/3; //squeezing the height 
ctx.drawImage(image, 0, 0, w, h); 

Но я плохо разбираюсь в математике, поэтому я надеюсь, что кто-то может помочь мне решить эту проблему.

Answer 1

Вы должны изучить матрицу преобразования.

Что-то вроде этого:

ctx.transform(1, 0.6, -.8, .5, 20, 0); 

http://jsfiddle.net/ericjbasti/nNZLC/

некоторые ссылки для Вас:

http://www.w3schools.com/tags/canvas_transform.asp

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/MatrixTransforms/MatrixTransforms.html

Answer 2

Я решить мою проблему. Я сжал свой имидж в фотошопе. Таким образом, изображение стало размером 300x150 и выглядело как второе изображение выше. Тогда я применил функцию ниже в любое время, когда мне нужно перерисовывать изображение в зависимости от угла:

 var TO_RADIANS = Math.PI/180; 
     ctx.save();   
     ctx.translate(x, y);    
     ctx.rotate(angle * TO_RADIANS);      
     var w = image.width-Math.abs((image.width/2)*Math.sin(angle* TO_RADIANS)); 
     var h = image.height+Math.abs((image.height)*Math.sin(angle * TO_RADIANS)); 
     ctx.translate(-w/2, -h/2); 
     ctx.drawImage(image, 0, 0, w, h);   
     ctx.restore(); 

Сейчас он работает довольно хорошо.