rotate() メソッド
構文
- context .
rotate(angle) -
指定の性質を使って回転変形を適用して、変換マトリックスを変更します。
仕様
変換マトリックスは、図形やパスが生成されるときに座標に適用されます。
コンテキストが生成されると、変換マトリックスは恒等変換で初期化されます。変形メソッドを使うことによって、変換マトリックスを調整することができます。
変形は、逆の順番で実行されなければいけません。たとえば、幅を2倍にする伸張変形を適用し、続いて、90°の回転変形を適用し、そして、canvas上に幅が高さの2倍となる矩形を描画すると、その実際の結果は、正方形となります。
rotate(angle) メソッドは、引数で指定された回転変形を変換マトリックスに追加しなければいけません。引数 angle は、時計回りの回転角をラジアンで表したものです。
原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-rotate
サンプル
このサンプルでは、まず元となる図形として、赤色の矩形を描いています。そして、rotate() メソッドで時計回りに 45° の回転変形をセットした上で、同じ矩形を青色で生成しています。元の矩形からどのように回転されるかを把握してください。
/* 元の矩形を赤色で描く */ ctx.strokeStyle = "red"; ctx.strokeRect(30, 10, 60, 20); /* 45°回転した矩形を青色で描く */ ctx.rotate( 45 * Math.PI / 180 ); ctx.strokeStyle = "blue"; ctx.strokeRect(30, 10, 60, 20);
rotate() メソッドによる回転は、左上端を基準に時計回りに回転されます。描いた図形の中心を基準に回転されるわけではない点に注意してください。
ブラウザ対応状況
| Firefox | Safari | Chrome | Opera | IE | ExplorerCanvas |
|---|---|---|---|---|---|
| 2 ○ | 2 ○ | 1 ○ | 9.2 ○ | 9 ○ | 0002 ○ |
| 3 ○ | 3 ○ | 2 ○ | 9.5 ○ | 3 ○ | |
| 3.5 ○ | 4 ○ | 3 ○ | 10 ○ | ||
| 3.6 ○ | 5 ○ | 6 ○ | 10.60 ○ |