HTMLリファレンスマニュアル

HTMLタグ一覧

HTML canvas translate()メソッド

translate()はCanvas 2D APIは、canvasとcanvasの原点x水平方向、原点y垂直方向をグリッド内で移動することで、平移変換のメソッドを追加します。

オンラインサンプル

位置（10,10）に描画され、新しい（0,0）位置が（70,70）。同じ矩形を再び描画します（注意、矩形は今や（80,80）位置から始めます：

サンプル

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">-8">
<title>HTML　canvas　translate()メソッドの使用-基本チュートリアル(oldtoolbag.com)</<title>
</<head>
<body>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3">
あなたのブラウザはHTMLをサポートしていません5　canvas　タグ。
</canvas>
<script>
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);
</script>
</body>
</html>

テストして見て‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safari が translate() をサポートメソッド。

注意：Internet Explorer 8 及びそれ以前のバージョンでは <canvas> 要素をサポートしていません。

定義と用法

translate() メソッドはキャンバス上の（0,0）位置を再マッピングします。

注意：translate() が呼ばれた後に fillRect() などのメソッドを呼び出すと、値が x と y 座標の値に加算されます。

JavaScript 语法：	context.translate(x,y);

パラメータの値

注意： あるいは両方のパラメータを指定できます。

パラメータ	説明
x	水平座標（x）に加える値。
y	垂直座標（y）に加える値。

HTML canvas リファレンスマニュアル

HTML: <template> タグ