Question

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

来源图片： Source image

旋转到0度并挤压： enter image description here

旋转到45度并挤压： enter image description here

像这样。

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

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

html5画布 - 模拟图像的3D旋转

2 个答案: