5

画像を回転させて (たとえば 45 度に) 押しつぶすにはどうすればよいですか。私は完全な正方形の画像を持っていると思います。任意の角度に回転できますが、回転した正方形を押しつぶして、高さを幅より 2/3 小さくしたいと考えています。結果として得られる画像は、完全に回転した正方形ではなく、押しつぶされたものになります。

どうすれば効果を達成できるか知っていますか?

4

2 に答える 2

4

正方形をつぶすのは非常に簡単です。スケールを適用するだけです。

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/

于 2013-04-17T03:30:12.817 に答える