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

translate メソッド

出典：HTML Canvas 2D Context 2012年3月7日 Editor's Draft版 http://dev.w3.org/html5/2dcontext/

描画する図形を平行移動します。

１．構文


		void translate(double x, double y);

パラメーター

X軸方向の平行移動量です。ピクセル単位。

Y軸方向の平行移動量です。ピクセル単位。

２．解説

このメソッドを呼び出すと現在の変換行列が変更され、その結果描画する図形を平行移動させます。これは通常左上にある原点の位置をずらすのと同じ効果なので原点の位置を指定するメソッドと考えることもできます。

結果としてrotateメソッドの回転の中心を移動させる効果があると考えることもできます。

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

translateメソッドが変更する変換行列はtranslateメソッドとは独立して存在しているため、translateメソッドを重ねて使用すると効果は累積します。translate(100, 0)は描画する図形をX軸方向に100ピクセル平行移動させるので、translate(100, 0)を2回呼び出すと平行移動量は合計で200ピクセルになります。

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

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

fillRectメソッド
strokeRectメソッド
fillTextメソッド
strokeTextメソッド
moveToメソッド
lineToメソッド
quadraticCurveメソッド
bezierCurveメソッド
arcToメソッド
rectメソッド
arcメソッド

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

３．例

以下の例では少しずつ座標をずらして３つの四角形を描画して色を重ねる。

translateの例


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

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

	

	//四角形を描画

	ctx.fillStyle = 'rgba(255,0,0,0.3)'; //半透明の赤

	ctx.fillRect(10, 10, 50, 50);

	

	//(15,15)ずらして四角形を描画

	ctx.translate(15, 15);

	ctx.fillStyle = 'rgba(0,255,0,0.3)'; //半透明の緑

	ctx.fillRect(10, 10, 50, 50);

	

	//さらに(15,15)ずらして四角形を描画

	ctx.translate(15, 15);

	ctx.fillStyle = 'rgba(0,0,255,0.3)'; //半透明の青

	ctx.fillRect(10, 10, 50, 50);

４．プラットフォーム

HTML5

実際に動作確認したブラウザ：IE9

実際に動作確認した結果想定通り動かなかったブラウザ：なし