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旋转

回答

相关问题