html5 canvas - 模拟图像的 3d 旋转答案

【问题标题】：html5 canvas - emulate 3d rotation of imagehtml5 canvas - 模拟图像的 3d 旋转
【发布时间】：2013-11-15 19:11:06
【问题描述】：

我有一个正方形的图像。我想旋转并挤压它以获得如下图所示的 3d 效果：

源图片：

旋转到 0 度并挤压：

旋转 45 度并挤压：

类似的东西。

我玩过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);

但我数学不好，希望有人能帮我解决这个问题。

【问题讨论】：

如果您想要快速响应，您将不得不提供比这更多的代码

标签： html math canvas html5-canvas

【解决方案1】：

我已经解决了我的问题。我在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();

现在效果很好。

【讨论】：

【解决方案2】：

您应该查看一个变换矩阵。

类似这样的：

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

【讨论】：

在我看来你的答案是对的！如果我想动态旋转它，我应该改变什么？我需要得到算法。