html5 canvas - 模擬圖像的3D旋轉

-2

我有一個正方形的圖像。我想旋轉，擠壓它來獲得3D效果就像下面的圖片：html5 canvas - 模擬圖像的3D旋轉

源圖像： Source image

旋轉到0度和擠壓： enter image description here

旋轉到45度和擠壓： enter image description here

就像這樣。

我已經圍繞Math演奏，並試圖通過乘以Sin和角度的Cos改變Width和圖像的Height。

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);

但是我不擅長數學，所以希望有人可以幫我解決這個問題。

來源

2013-11-15 Nolesh

如果你想快速回復，你將不得不提供更多的代碼 –

你應該看看變換矩陣。

事情是這樣的：

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

來源

2013-11-15 05:16:25 ericjbasti

對我來說，你的答案是對的！如果我想動態旋轉它，我應該改變什麼？我需要得到算法。 – Nolesh

我已經解決我的問題。我在Photoshop中擠壓了我的圖像。所以，圖像變成了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();

現在工作得很好。

來源

2013-11-15 11:11:06 Nolesh

html5 canvas - 模擬圖像的3D旋轉

回答

相關問題