canvasの回転処理でこのコードの意味を教えて頂けないでしょうか

Question

http://jsfiddle.net/gfcarv/t4YX4/
こちらのページのjavascriptの部分で、40行目の「context.translate(cw, ch / cw);」の部分が何を求めてセットしているのかがよくわかりません。translateが原点を指定してるというのはわかるのですが。。

ご教授おねがいいたします

Answer 1

私も分かりません。
HTML側に例えば「width="100" height="1000"」などの極端な値を入れると分かりやすいですが、回転時にch/cwの分だけ位置がずれます。
何かの勘違いか、意図があるのか、私には分かりません。
私には「context.translate(cw, 0);」の方がずれなく適切に回転するように思います。

Answer 2

コードの一番上に

var cw = canvas.width;
var ch = canvas.height;

とあるため、cwにcanvasの横幅、chに縦幅が代入されています。

その後、

context.translate(cw, ch / cw);

の上で

canvas.width = ch;
canvas.height = cw;
cw = canvas.width;
ch = canvas.height;

となっているので、キャンバスの横幅をもとの縦幅、縦幅をもとの横幅に設定し(=縦横入れ替えている)、
改めてcwとchに代入しています。

translateは移動させる処理のため、水平方向に回転後のキャンバスの幅分、垂直方向に回転後のキャンバスの高さ÷幅分移動することになります。

参考: http://www.htmq.com/canvas/translate.shtml

Comments

[yoppy0066]

ご回答ありがとうございます。この場合、
1回目の回転時 : cw = 200、 ch/cw = 0.5
2回目の回転時 : cw = 100、 ch/cw = 2
3回目の回転時 : cw = 200、 ch/cw = 0.5
4回目の回転時 : cw = 100、 ch/c2 = 2
・・・
のようになりますが、何を求めているのかよくわかりません。。ch/cwで何を求めたいのでしょうか。。