CanvasRenderingContext2D.moveTo()
CanvasRenderingContext2D.moveTo()
はキャンバス 2D API のメソッドで、新しいサブパスの始点を (x, y)
座標に移動します。
構文
js
void ctx.moveTo(x, 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
関連情報
- このメソッドを定義しているインターフェイス:
CanvasRenderingContext2D
CanvasRenderingContext2D.lineTo()
CanvasRenderingContext2D.stroke()