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

仕様

仕様 状態 コメント
HTML Living Standard
CanvasRenderingContext2D.moveTo の定義
現行の標準

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
moveToChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 11.6Safari 完全対応 2WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 12Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

参考情報