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

Canvas 2D APIの{{domxref("CanvasRenderingContext2D")}}インターフェイスのsetLineDash()メソッドは、線を描画するときに使用される線の模様を設定します。 これは描画する線とその隙間の長さの値を交互に指定する配列を使用します。

+ +
+

注: 線の模様を実線に戻す場合には、指定する配列の中身を空にします。

+
+ +

文法

+ +
ctx.setLineDash(segments);
+
+ +

引数

+ +
+
segments
+
描画する線の長さとその隙間の数値を交互に指定する配列({{jsxref("Array")}}) (座標空間単位)。配列内の要素数が奇数の場合、配列の要素がコピーされて連結されます。 例えば、[5, 15, 25]は[5, 15, 25, 5, 15, 25]になります。 配列が空の場合、ラインダッシュリストはリセットされ、描画される線は実線に戻ります。
+
+ +

例

+ +

簡単な例

+ +

この例では、setLineDash()メソッドを使用して、実線の上に破線を描画します。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Dashed line
+ctx.beginPath();
+ctx.setLineDash([5, 15]);
+ctx.moveTo(0, 50);
+ctx.lineTo(300, 50);
+ctx.stroke();
+
+// Solid line
+ctx.beginPath();
+ctx.setLineDash([]);
+ctx.moveTo(0, 100);
+ctx.lineTo(300, 100);
+ctx.stroke();
+
+ +

実行結果

+ +

{{ EmbedLiveSample('Basic_example', 700, 180) }}

+ +

いくつかの一般的な模様

+ +

この例は、さまざまな一般的な破線のパターンを示しています。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

下記のdrawDashedLine()関数を使用すると、複数の破線を簡単に描画できます。引数としてパターン配列を受け取ります。

+ +
function drawDashedLine(pattern) {
+  ctx.beginPath();
+  ctx.setLineDash(pattern);
+  ctx.moveTo(0, y);
+  ctx.lineTo(300, y);
+  ctx.stroke();
+  y += 20;
+}
+
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+let y = 15;
+
+drawDashedLine([]);
+drawDashedLine([1, 1]);
+drawDashedLine([10, 10]);
+drawDashedLine([20, 5]);
+drawDashedLine([15, 3, 3, 3]);
+drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3]);
+drawDashedLine([12, 3, 3]);  // [12, 3, 3, 12, 3, 3]と同じ
+
+
+ +

実行結果

+ +

{{ EmbedLiveSample('Some_common_patterns', 700, 180) }}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ + + +

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

+ +

関連情報

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