translate() メソッド

CanvasRenderingContext2D ＞ translate()メソッド

概要

　状態:- 　閲覧数:875 　投稿日: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メソッド

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



類似度ページランキング
順位 ページタイトル抜粋 ％
1 translate() メソッド 88
2 stroke() メソッド 76
3 clear()メソッド 74
4 scale()メソッド 74
5 clearRect()メソッド 71
6 transform()メソッド 71
7 setTransform()メソッド 71
8 save()メソッド 69
9 rect()メソッド 69
10 clearDepth()メソッド 69
11 strokeRect() メソッド 67
12 beginPath()メソッド 65
13 lineTo()メソッド 64
14 arc()メソッド 64
15 drawImage() メソッド 63
16 clearColor()メソッド 63
17 bufferData()メソッド 63
18 setItem()メソッド 62
19 getContext() メソッド 61
20 fillRect()メソッド 60
2024/11/23 11:42 更新
週間人気ページランキング ／ 11-16 → 11-22
順位 ページタイトル抜粋 アクセス数
1 フォーム | その他 4
2 アフィン変換 | transform()メソッド(CanvasRenderingContext2D ) 3
3 moveTo()メソッド(CanvasRenderingContext2D ) カテゴリー 2
3 bufferData()メソッド(WebGLRenderingContext) カテゴリー 2
3 シェーダー | compileShader()メソッド(WebGLRenderingContext) 2
3 drawArrays()メソッド | WebGLRenderingContext 2
4 strokeStyleプロパティ(CanvasRenderingContext2D ) カテゴリー 1
4 arc()メソッド(CanvasRenderingContext2D ) カテゴリー 1
4 WebGLProgram カテゴリー 1
4 createProgram()メソッド(WebGLRenderingContext) カテゴリー 1
4 ログイン 1
4 RGBA | 色 1
4 ゲストコメント一覧ページ 1
4 カテゴリ一覧 1
4 アカウント登録 1
4 shaderSource()メソッド(WebGLRenderingContext) カテゴリー 1
4 「線形グラデーションで塗りつぶした四角形」を描画するためには？ 1
4 rect()メソッド | CanvasRenderingContext2D 1
4 strokeRect() メソッド | CanvasRenderingContext2D 1
4 save()メソッド | CanvasRenderingContext2D 1
2024/11/23 1:01 更新