ちょっと覚書。
HTML5のCanvasで、線を引いたりするとして、回転させようと思ったら、三角関数を知ってれば、計算でどうにか出来る。
しかし、
ctx.fillText("hogehoge", x, y);
ctx.strokeText("hogehoge", x, y);
のようなものは、三角関数を知っていたとしても、このままでは回転させたりすることが出来ない。
そこで登場するのが、
ctx.rotate(radians);
です。
とはいっても、これだけを知っていてもどうにもならないので、大まかな手順を書いておく。
まずは、
var canvas = document.getElementById('cvs');
if ( ! canvas || ! canvas.getContext ) return false;
var ctx = canvas.getContext('2d');
と、おまじないのように定義してあったとする。
何を回転させるのかにもよるが、
まずは回転軸の中心座標(0, 0)を設定します。
ctx.translate(x, y);
続いて、回転角度を設定します。
ctx.rotate(degrees*Math.PI/180.0);
ラジアンで設定出来る人ならそれで良いが、弧度法の場合を示しておいた。
因みに3時の方角が0˚で時計回りです。
回転が指定出来たら、図形を描いていく。
最後に、おまじないですが、
ctx.setTransform(1, 0, 0, 1, 0, 0);
と与えることで、設定がリセット出来ます。
必要に応じて、回転軸の中心座標を戻しましょう。
ctx.translate(0, 0);
まぁ、ctx.setTransformを使うと、もっと複雑な図形を描くことが出来るんだけど、それは必要に駆られてからやろうかな。
ではでは