CanvasRenderingContext2D.moveTo()

CanvasRenderingContext2D.moveTo() はキャンバス 2D API のメソッドで、新しいサブパスの始点を (x, y) 座標に移動します。

構文

js
void ctx.moveTo(x, y);

引数

x

点の x (水平) 座標。

y

点の y (鉛直) 座標。

例

複数のサブパスの作成

この例は、moveTo() を使用して、1 つのパス内に 2 つのサブパスを作成します。サブパスは両方とも stroke() の呼び出し 1 回で、描画することができます。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

最初の線は、 (50, 50) が始点で (200, 50) が終点です。 2 番目の線は、(50, 90) が始点で (280, 120) が終点です。

js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50, 50); // 1 つ目のサブパス
ctx.lineTo(200, 50);
ctx.moveTo(50, 90); // 2 つ目のサブパス
ctx.lineTo(280, 120);
ctx.stroke();

結果

仕様書

Specification
HTML Standard
# dom-context-2d-moveto-dev

ブラウザーの互換性

BCD tables only load in the browser

関連情報