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
仕様
仕様 | 状態 | コメント |
---|---|---|
HTML Living Standard CanvasRenderingContext2D.moveTo の定義 |
現行の標準 |
ブラウザー実装状況
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
参考情報
- このメソッドを定義しているインターフェイス:
CanvasRenderingContext2D
CanvasRenderingContext2D.lineTo()
CanvasRenderingContext2D.stroke()