CanvasRenderingContext2D: moveTo() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
CanvasRenderingContext2D.moveTo() はキャンバス 2D API のメソッドで、新しいサブパスの始点を (x, y) 座標に移動します。
構文
js
moveTo(x, y)
引数
返値
なし (undefined)。
例
複数のサブパスの作成
この例は、moveTo() を使用して、1 つのパス内に 2 つのサブパスを作成します。サブパスは両方とも stroke() の呼び出し 1 回で、描画することができます。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
最初の線は、 (50, 50) が始点で (200, 50) が終点です。 2 番目の線は、(50, 90) が始点で (280, 120) が終点です。
js
const canvas = document.getElementById("canvas");
const 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();
結果
仕様書
| 仕様書 |
|---|
| HTML # dom-context-2d-moveto-dev |
ブラウザーの互換性
関連情報
- このメソッドを定義しているインターフェイス:
CanvasRenderingContext2D CanvasRenderingContext2D.lineTo()CanvasRenderingContext2D.stroke()