Canvas 勉強中のメモ その3
お題は回転です。
Canvas 勉強中のメモ その2 - newononeが作るネットサービス更新記録
前回はすこしずつずらして描画することで
図形を回転させました。
回転後の図形を計算で求めるのは大変なので、
今回はrotateメソッドを使い回転させてみます。
今更聞けないcanvasの基礎の基礎 - KAYAC engineers' blog
を参考にしました。
ポイントは1つだけ。
rotate()は原点(0,0)を中心に回転させる命令なので
図形の中心を原点にもっていく必要があります。
画用紙をずらして、回転させて、位置を戻すイメージです。
(400,400)の用紙で、回転の中心を(200,200)にしたい場合
は以下のようにします。
- ctx.translate(200,200);
- ctx.rotate( rad * Math.PI / 180 );
- ctx.translate(-200,-200);
- drawCircle(ctx,circle,items);
用紙をちゃんと戻してから、図形を描画しないと
ちゃんと回転しません。
回転させてから、描画するとというのはなんだか
直感的ではない気もします。
描いた図形を回転できるわけじゃない！
用紙を回転させてから図形を書くことで回転が実現できます。
できました。
ソースコードは右クリックでどうぞ。
代数幾何の回転公式なんて知らなくてもrotate()メソッドで
回転できてしまうのでした。
次回はテキストの扱いについてです。
