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 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

参考情報