画像を回転させて (たとえば 45 度に) 押しつぶすにはどうすればよいですか。私は完全な正方形の画像を持っていると思います。任意の角度に回転できますが、回転した正方形を押しつぶして、高さを幅より 2/3 小さくしたいと考えています。結果として得られる画像は、完全に回転した正方形ではなく、押しつぶされたものになります。
どうすれば効果を達成できるか知っていますか?
正方形をつぶすのは非常に簡単です。スケールを適用するだけです。
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);