translate() メソッド
構文
- context .
translate(x, y) -
指定の性質を使って移動変形を適用して、変換マトリックスを変更します。
説明
変換マトリックスは、図形やパスが生成されるときに座標に適用されます。
コンテキストが生成されると、変換マトリックスは恒等変換で初期化されます。変形メソッドを使うことによって、変換マトリックスを調整することができます。
変形は、逆の順番で実行されなければいけません。たとえば、幅を2倍にする伸張変形を適用し、続いて、90°の回転変形を適用し、そして、canvas上に幅が高さの2倍となる矩形を描画すると、その実際の結果は、正方形となります。
translate(x, y) メソッドは、引数で指定された移動変形を変換マトリックスに追加しなければいけません。引数 x は水平方向の移動距離を、引数 y は垂直方向の移動距離を表します。引数は座標空間の単位で表されます。
原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-translate
サンプル
このサンプルでは、まず元となる図形として、赤色の矩形を描いています。そして、translate() メソッドで右に 40、下に 40 ピクセルの移動変形をセットした上で、同じ矩形を青色で生成しています。元の矩形からどのように移動されるかを把握してください。
/* 元の矩形を赤色で描く */ ctx.fillStyle = "red"; ctx.fillRect(10, 10, 40, 30); /* 右に40、下に40ピクセル移動した矩形を青色で描く */ ctx.translate(40, 40); ctx.fillStyle = "blue"; ctx.fillRect(10, 10, 40, 30);
ブラウザ対応状況
| 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 ○ |