CanvasRenderingContext2D.moveTo()

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

void ctx.moveTo(x, y);

x

点の x (水平) 座標。

y

点の y (鉛直) 座標。

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

HTML

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

JavaScript

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

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();

Result

• このメソッドを定義しているインターフェイス: CanvasRenderingContext2D
• CanvasRenderingContext2D.lineTo()
• CanvasRenderingContext2D.stroke()