HTMLキャンバスのtranslate（）メソッド
例
位置（10,10）に長方形を描画し、新しい（0,0）位置を（70,70）に設定します。同じ長方形をもう一度描画します（長方形が位置（80,80）から始まることに注意してください：
JavaScript：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillRect(10, 10, 100, 50);
ブラウザのサポート
表の数字は、このメソッドを完全にサポートする最初のブラウザバージョンを示しています。
| Method | |||||
|---|---|---|---|---|---|
| translate() | Yes | 9.0 | Yes | Yes | Yes |
定義と使用法
translate（）メソッドは、キャンバス上の（0,0）位置を再マップします。
注： translate（）の後にfillRect（）などのメソッドを呼び出すと、値がx座標とy座標の値に追加されます。
| JavaScript構文： | context .translate（x、y）; |
|---|
パラメータ値
注： 1つまたは両方のパラメーターを指定できます。
| Parameter | Description | Play it |
|---|---|---|
| x | The value to add to horizontal (x) coordinates | |
| y | The value to add to vertical (y) coordinates |
❮HTMLキャンバスリファレンス