HTML Canvas : Rotate the Image 3D effect

Question

如何旋转图像(例如旋转 45 度)和压缩图像。假设我有一个完美的方形图像。我可以将它旋转到我想要的任何角度，但我想让旋转的正方形被压扁，使高度比宽度小 2/3。生成的图像将不是一个完美的旋转正方形，而是一个被压扁的正方形。

你知道我怎样才能达到这个效果吗？

Answer 1

挤压正方形非常容易，只需应用一个比例尺即可:

ctx.scale(1, 2/3);//将它压缩到 2/3 垂直大小

不过，您必须通过 (opposite fraction * the height)/2 对其进行翻译才能使其居中。

因此，要旋转然后挤压 200x200 方形图像，您只需:

// rotation first
ctx.translate(100,100);
ctx.rotate(.3);
ctx.translate(-100,-100);

// than scale
ctx.translate(0,200 * (1/3) / 2) // move by half of the 1/3 space to center it
ctx.scale(1, 2/3); // squish it to 2/3 vertical size

ctx.drawImage(img, 0,0);

示例:http://jsfiddle.net/simonsarris/3Qr3S/