CanvasRenderingContext2D.rotateメソッド

るきおWeb研究所 HTML5 APIリファレンス
HTML5 canvas


		void rotate(double angle);

回転の角度をラジアン単位で指定します。この角度分時計回りに回転します。

２．解説

このメソッドを呼び出すと現在の変換行列が変更され、その結果描画する図形を回転させます。たとえば、指定した位置から原点を中心に30度、60度など回転させて図形を描画することができます。angleに負の値を指定することで反時計回りを指定することもできます。

既に描画した内容に影響を与えるのではなく、これから描画する内容に影響を与えます。

原点は初期状態ではCanvasの左上です。原点を移動するにはtranslateメソッドを使用します。たとえばtranlate(100, 100)は原点の座標を(100, 100)に移動するので、rotateメソッドによる回転の中心が変わります。

rotateメソッドが変更する変換行列はrotateメソッドとは独立して存在しているため、rotateメソッドを重ねて使用すると効果は累積します。rotate(1)は原点を中心に図形を1ラジアン分の回転を変換行列に追加するので、rotate(1)を2回呼び出すと回転角度は2ラジアンになります。

変換行列を初期状態に戻すにはsetTransform(1, 0, 0, 1, 0, 0)を使用します。または特定の時点でsaveメソッドで状態を保存し必要に応じてrestoreメソッドでその時点の状態を復元することもできます。

rotateメソッドのほかに変換行列に影響を与えるのはscaleメソッド、translateメソッド、transformメソッド、setTransformメソッドです。

３．例

以下の例は「竜」を時計回りに30度ずつ回転させて３つ描きます。


	var canvas1 = document.getElementById('Canvas1');

	var ctx = canvas1.getContext('2d');

	

	ctx.font = '24pt Meiryo'

	ctx.fillText('竜', 100, 40);

	

	//30度の回転を変換行列にセット

	ctx.rotate(30 * Math.PI / 180);

	ctx.fillText('竜', 100, 40);

	

	//30度の回転を変換行列にセット(=合計60度)

	ctx.rotate(30 * Math.PI / 180);

	ctx.fillText('竜', 100, 40);

以下の例では原点を(100, 100)に移動し、そこを中心に回転させた円を描きます。


	var canvas1 = document.getElementById('Canvas1');

	var ctx = canvas1.getContext('2d');

	

	//原点を(100, 100)に移動→以降ここを(0,0)とみなせる。

	ctx.translate(100, 100);

	

	//原点の位置に点を描く

	ctx.fillRect(-1, -1, 2, 2);

	

	//(50, 0)を中心に円を描く

	ctx.beginPath();

	ctx.arc(50, 0, 10, 0, Math.PI * 2);

	ctx.fill();

	

	//120度の回転を変換行列にセット

	ctx.rotate(120 * Math.PI / 180);

	

	//(50, 0)を中心に円を描く

	ctx.fillStyle = 'red';

	ctx.beginPath();

	ctx.arc(50, 0, 10, 0, Math.PI * 2);

	ctx.fill();

以下はrotateメソッドをアニメーションで使用するやや複雑な回転運動の例です。

rotate メソッド

１．構文

２．解説

３．例

４．プラットフォーム