HTML5 canvas translate メソッド
 HTML5 canvas リファレンス
例
矩形を描画し、キャンバスの 70px 下と右に移動し、再度矩形を描画します:
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);
Try it yourself »
定義と用法
translate メソッドは、指定した位置にキャンバスを移動します。
キャンバス自体の位置は変りませんが、すべての図面は、 translate() メソッドが移動した後で行われます:
translate メソッドは、キャンバスを移動する x 座標と y 座標の2つのパラメータをとります。
| JavaScript 構文: |
context.translate(x,y); |
ブラウザ・サポート
translate メソッドは、主要な全ブラウザがサポートしています。
パラメータ値
| パラメータ |
値 |
説明 |
Play it |
| x |
x-coordinate |
指定の座標をキャンバスの水平方向へ移動する |
Play it » |
| y |
y-coordinate |
指定の座標をキャンバスの垂直方向へ移動する |
Play it » |
HTML5 canvas リファレンス
|