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

Question

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

源图像：

旋转到 0 度并挤压：

旋转45度并挤压：

像这样的东西。

我玩过并Math试图通过乘以角度来改变图像的Width和。HeightSinCos

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

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

现在它工作得很好。

Answer 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