1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
---
title: CanvasRenderingContext2D.setLineDash()
slug: Web/API/CanvasRenderingContext2D/setLineDash
translation_of: Web/API/CanvasRenderingContext2D/setLineDash
---
<div>{{APIRef}}</div>
<p>Canvas 2D APIの{{domxref("CanvasRenderingContext2D")}}インターフェイスの<code>setLineDash()</code>メソッドは、線を描画するときに使用される線の模様を設定します。 これは描画する線とその隙間の長さの値を交互に指定する配列を使用します。</p>
<div class="note">
<p><strong>注:</strong> 線の模様を実線に戻す場合には、指定する配列の中身を空にします。</p>
</div>
<h2 id="文法">文法</h2>
<pre class="syntaxbox notranslate"><em>ctx</em>.setLineDash(<em>segments</em>);
</pre>
<h3 id="引数">引数</h3>
<dl>
<dt><code>segments</code></dt>
<dd>描画する線の長さとその隙間の数値を交互に指定する配列({{jsxref("Array")}}) (座標空間単位)。配列内の要素数が奇数の場合、配列の要素がコピーされて連結されます。 例えば、<code>[5, 15, 25]</code>は<code>[5, 15, 25, 5, 15, 25]</code>になります。 配列が空の場合、ラインダッシュリストはリセットされ、描画される線は実線に戻ります。</dd>
</dl>
<h2 id="例">例</h2>
<h3 id="簡単な例">簡単な例</h3>
<p>この例では、<code>setLineDash()</code>メソッドを使用して、実線の上に破線を描画します。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js; highlight:[6, 13] notranslate">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();
</pre>
<h4 id="実行結果">実行結果</h4>
<p>{{ EmbedLiveSample('Basic_example', 700, 180) }}</p>
<h3 id="いくつかの一般的な模様">いくつかの一般的な模様</h3>
<p>この例は、さまざまな一般的な破線のパターンを示しています。</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html notranslate"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript_2">JavaScript</h4>
<p>下記の<code>drawDashedLine()</code>関数を使用すると、複数の破線を簡単に描画できます。引数としてパターン配列を受け取ります。</p>
<pre class="brush: js notranslate">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]と同じ
</pre>
<h4 id="実行結果_2">実行結果</h4>
<p>{{ EmbedLiveSample('Some_common_patterns', 700, 180) }}</p>
<h2 id="仕様">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様</th>
<th scope="col">策定状況</th>
<th scope="col">コメント</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2>
<p>{{Compat("api.CanvasRenderingContext2D.setLineDash")}}</p>
<h2 id="関連情報">関連情報</h2>
<ul>
<li>このメソッドを定義しているインターフェース:{{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li>
<li>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</li>
</ul>
|
