translate() メソッド

CanvasRenderingContext2D translate()メソッド

概要

 状態:-  閲覧数:792  投稿日:2014-03-18  更新日:2014-03-18  
要素の表示位置を移動
・描画時に平行移動が適用されるようにする

構文
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メソッド


コメント投稿(ログインが必要)



週間人気ページランキング / 3-21 → 3-27
順位 ページタイトル抜粋 アクセス数
1 フォーム | その他 7
2 WebGL2RenderingContext 2
2 HTML5用語 2
3 シェーダー | compileShader()メソッド(WebGLRenderingContext) 1
3 arc()メソッド | CanvasRenderingContext2D 1
3 WebGLShader 1
2024/3/28 1:01 更新