現在ログインしていません。
新規アカウント作成
ログイン

CanvasRenderingContext2D.Rotate

CanvasRenderingContext2D >

rotate メソッド

描画する図形を回転します。

1.構文

void rotate(double angle);
■リスト1:

パラメーター

angle

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

2.解説

このメソッドを呼び出すと現在の変換行列が変更され、その結果描画する図形を回転させます。たとえば、指定した位置から原点を中心に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メソッドでその時点の状態を復元することもできます。

変換行列の影響を受けるのは以下のメソッドです。

fillRectメソッド strokeRectメソッド fillTextメソッド strokeTextメソッド moveToメソッド lineToメソッド quadraticCurveメソッド bezierCurveメソッド arcToメソッド rectメソッド arcメソッド rotateメソッドのほかに変換行列に影響を与えるのはscaleメソッド、translateメソッド、transformメソッド、setTransformメソッドです。

3.例

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

rotate1

rotateの例

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);
■リスト2:

以下の例では原点を(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();
■リスト3:

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

サンプルページ

rotateDemo