HTML Canvas：旋转图像 3D 效果

Question

我怎样才能旋转图像（例如45度）并挤压图像。假设我有一个完美的方形图像。我可以将它旋转到我想要的任何角度，但我想让旋转后的正方形被压扁，使高度比宽度小 2/3。生成的图像将不是一个完美的旋转正方形，而是一个被压扁的正方形。

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

Answer 1

压扁一个正方形非常容易，只需应用一个比例即可：

ctx.scale(1, 2/3); // squish it to 2/3 vertical size

不过，您必须将其翻译为(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/