図形を回転する(rotate) [html5 の Canvas を使ってみる：第廿一回]

rotate(); は、一度描いた図形を回転する。まず、x:0、y:0 の座標から幅・高さ共に 30 の正方形を 60°回転してみる。rotate(); では、x:0、y:0 を基点として与えられたラジアンでの角度を回転するので、ノーマルの状態だと回転後の図形の左部分が消えてしまうので、translate(); で x 軸の正方向に 100 ずらし、x 軸と y 軸のそれぞれ 0 のラインを補助線として引いてみる。

★html 側

<canvas id="rotate"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
draw();
};
function draw() {
// id: rotate で 2 次元描画を行うことの定義
var c = document.getElementById("rotate").getContext('2d');

// 回転前の赤い枠の矩形を rect(); と strokeStyleで描画
c.beginPath();
c.strokeStyle = "rgb(255, 0, 0)";
c.rect(0, 0, 30, 30);
c.stroke();
// 回転後の青い枠の矩形を rect(); と strokeStyleで描画
c.beginPath();
c.strokeStyle = "rgb(0, 0, 255)";
// 60°回転
c.rotate(60 * Math.PI / 180);
c.rect(0, 0, 30, 30);
c.stroke();
}

すると、こうなる。青い扇形が 60°を示している。


次に、x:50、y:0 の座標から描いた同じ矩形を 60°回転してみると、こうなる。


x:0、y:0 だと判りにくかったが、回転前と回転後の矩形の基点は、x:0、y:0 から基点までの距離を半径とした円に沿って移動している。


回転前の矩形の上辺に沿った補助線を引き、その補助線ごと回転すると、実際に 60°動いたことが判りやすくなる。これも青い扇形が 60°を示している。


同じ矩形を 20°だけ回転してみる。青い扇形が 20°となっている。

// 20°回転
c.rotate(20 * Math.PI / 180);

今度は、x:0、y:50 の座標から描いた同じ矩形を 60°回転してみると、こうなる。


これも同じように矩形の基点までの距離を半径にした円に沿って移動している。


補助線を引いてみる。x:0、y:0 から回転後の青い矩形の左辺に向かって引いている灰色の補助線と y 軸との青い扇形が 60°であり、青い線も赤い線も円に接して引かれており、灰色の線と y 軸はそれぞれに対して垂直に引いてあるので、青い線・赤い線・灰色の線・y 軸でできた四角形の赤い扇形が 120°となる。これにより、赤い線と青い線が交わった青い扇形も 60°で等価となる。


では、同じ矩形を 37°だけ回転してみる。青い扇形が 37°となっている。

// 37°回転
c.rotate(37 * Math.PI / 180);

最後に、x:50、y:50 の座標から描いた同じ矩形を 60°回転してみると、こうなる。


これも矩形の基点である x:50、y:50 と x:0、y:0 との距離でできる円に沿っている。上では x や y の値をそのまま半径として使えたが、今回は赤い矩形の左上に、緑で x と y の値である 50 を一辺とした正方形を描いてみると、直角二等辺三角形なので半径は 50 * √2 ということになる。


さて、これも矩形の上辺に沿った線を引き、それごと回してみる。


これにも補助線を引いてみる。今回は赤い線と青い線が交わった青い角度と回転してできた角度の等価の証明が少しややこしい。
まず、緑の線はそれぞれの矩形の対角線を結ぶように x:0、y:0 から引いた線であり、赤い矩形の基点の座標が x:50、y:50 なので、x 軸と緑の線でできた緑の扇形は 45°となり、そこに回転の 60°が加わるので、残りの赤い扇形は 75°となる。ピンクの線は x 軸に並行で、回転後の青い矩形に接して引いてあり、このピンクの線と緑の線でできた赤い扇形は、錯角により先ほどの赤い角度と同じ 75°となる。また、この青い矩形の中をぶっ通している緑の線は対角線を結んでいるので、青い線と緑の線でできた緑の扇形は 45°となり、残りの青い扇形は 60°となる。最後に、赤い線と青い線が交わったところの青い扇形は、ピンクの線と青い線でできた先ほどの青い扇形の同位角で、かつ赤い線とピンクの線が並行なので等価となり、矩形を回転してできた青い扇形とも等価となる。


なんか、、、rotate(); の話ではなくなった気がする。。。

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5