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

よろしくお願いします

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

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

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

No.2 回答者： fujillin 回答日時： 2012/07/11 13:24

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

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

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


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

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

この回答へのお礼

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

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

お礼日時：2012/07/13 16:57

No.1 回答者： fujillin 回答日時： 2012/07/10 22:08

ここに説明されています。

http://www.html5.jp/canvas/ref/method/transform. …

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

この回答へのお礼

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

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

お礼日時：2012/07/11 09:03