HTML画布:旋转图像3D效果 [英] HTML Canvas: Rotate the Image 3D effect

问题描述

我如何旋转图像(例如，旋转至45度)并挤压图像.假设我有一个完美的方形图像.我可以将其旋转到我想要的任何角度，但我想使旋转后的正方形压扁，使高度2/3小于宽度.生成的图像将不是一个完美的旋转正方形，而是一个压缩的正方形.

How can i rotate the image (eg. to 45degrees) and squash the image. supposed i have a perfect square image. I can rotate it to any angle i want but i want to make the rotated square squashed, making the height 2/3 smaller than the width. the resulting image would be not a perfect rotated square but a squashed one.

你知道我怎么能达到效果吗?

do you know how can I achieve the effect?

推荐答案

压正方形非常简单，只需应用比例尺即可:

Squishing a square is exceedingly easy, simply apply a scale:

ctx.scale(1，2/3);//将其压缩为垂直大小的2/3

您必须将其翻译为(对数*高度)/2 ，以使其居中.

You'll have to translate it by the (opposite fraction * the height) / 2 to get it centered, though.

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

So to rotate and then squish a 200x200 square image you'd simply:

// 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/

这篇关于HTML画布:旋转图像3D效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！