概要
状態:-
閲覧数:847
投稿日:2014-03-18
更新日:2014-03-18
要素の表示位置を移動
・描画時に平行移動が適用されるようにする
構文
引数
・第1引数x … X軸方向の平行移動量。ピクセル単位
・第2引数y … Y軸方向の平行移動量。ピクセル単位
戻り値
・なし
・このメソッドを呼び出すと現在の変換行列が変更され、その結果描画する図形を平行移動させる
・既に描画した内容に影響を与えるのではなく、これから描画する内容に影響を与える
・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メソッド
・描画時に平行移動が適用されるようにする
構文
CanvasRenderingContext2Dオブジェクト.translate(x, y);
引数
・第1引数x … X軸方向の平行移動量。ピクセル単位
・第2引数y … Y軸方向の平行移動量。ピクセル単位
戻り値
・なし
詳細
・このメソッドを呼び出すと現在の変換行列が変更され、その結果描画する図形を平行移動させる
・既に描画した内容に影響を与えるのではなく、これから描画する内容に影響を与える
・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メソッド