From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/canvasrenderingcontext2d/moveto/index.html | 89 ++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 files/ja/web/api/canvasrenderingcontext2d/moveto/index.html (limited to 'files/ja/web/api/canvasrenderingcontext2d/moveto') diff --git a/files/ja/web/api/canvasrenderingcontext2d/moveto/index.html b/files/ja/web/api/canvasrenderingcontext2d/moveto/index.html new file mode 100644 index 0000000000..4c3537dad5 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/moveto/index.html @@ -0,0 +1,89 @@ +--- +title: CanvasRenderingContext2D.moveTo() +slug: Web/API/CanvasRenderingContext2D/moveTo +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/moveTo +--- +
{{APIRef}}
+ +

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

+ +

{{ EmbedLiveSample('Creating_multiple_sub-paths', 700, 180) }}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.CanvasRenderingContext2D.moveTo")}}

+ +

参考情報

+ + -- cgit v1.2.3-54-g00ecf