javascriptで画像を回転後縮小の方法

質問

よろしくお願いします

canvas上のjavascript(2D)にて
画像を回転させてからつぶしたような描画方法をご存知ないでしょうか。

画像の回転とYの縮小(つぶす形の表示)はできるのですが、
この場合、先に縦がつぶされてから、回転されて、表示されます。

添付のように回転させた画像を表示したいのですが
わかりますでしょうか

回答No.2

fujillin

ご紹介したサイトのscale()の説明に、複数の変換マトリックスのかけ合わせについての簡単な説明がありますが、ご覧になっていますか？

また、解説サイトはここだけではありません。
解説してくれているサイトは沢山ありますので、ここでの限られた回答の説明よりもよほど丁寧に解説されているはずです。
座標変換が不明であれば、canvasとは関係なく座標の変換マトリックスについても調べてみてください。

とりあえず、canvasの仕様で一番正確なのは仕様書でしょうか。
http://www.w3.org/TR/2010/WD-2dcontext-20100624/

私もcanvasはよく存じませんが、紹介した手前、そのサイトをざっと眺めて実験してみました。
　rotate → scale　　でも、
　scale →　rotate　　あるいは、
　transform　でも
どの方法でも可能です。

transformは一般の座標変換マトリックスになっているので、scale、rotate、tranlateを一度に扱えることができるだけです。

お礼

ありがとうございました。
社内にできた人間がいましたので解決しました。

ありがとうございました。

回答No.1

fujillin

ここに説明されています。
http://www.html5.jp/canvas/ref/method/transform.html

scale()、rotate()、transform()などを参照してください。

お礼

早速のご回答ありがとうございます。

ただ、scaleとrotateでは
添付の絵の左側にしかできませんでした。
transformを使うのであれば、
もう少しなにかわかりやすい説明をしていただけると助かります。