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
131
|
---
title: CanvasRenderingContext2D.lineCap
slug: Web/API/CanvasRenderingContext2D/lineCap
translation_of: Web/API/CanvasRenderingContext2D/lineCap
---
<div>{{APIRef}}</div>
<div>Canvas 2D APIの<code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineCap</code></strong> プロパティは、描線の端点の形状を設定します。</div>
<div class="blockIndicator note">
<p><strong>Note:</strong> 描線は {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}、 {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}、 {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} のメソッドで行われます。</p>
</div>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox"><em>ctx</em>.lineCap = "butt" || "round" || "square";
</pre>
<h3 id="Options">Options</h3>
<dl>
<dt><code>"butt"</code></dt>
<dd>端点は四角く切られます。デフォルト値です。</dd>
<dt><code>"round"</code></dt>
<dd>端点は丸くなります。</dd>
<dt><code>"square"</code></dt>
<dd>端点に線幅と同じ幅で高さが半分の四角形が描き加えられます。</dd>
</dl>
<h2 id="Examples">Examples</h2>
<h3 id="線の先端の形を変える">線の先端の形を変える</h3>
<p>この例では直線の端点を丸めています。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js; highlight:[7]">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineWidth = 15;
ctx.lineCap = 'round';
ctx.lineTo(100, 100);
ctx.stroke();
</pre>
<h4 id="Result">Result</h4>
<p>{{ EmbedLiveSample('Changing_the_shape_of_line_caps', 700, 180) }}</p>
<h3 id="先端形状の比較">先端形状の比較</h3>
<p>次の例では、<code>lineCap</code> プロパティがそれぞれ異なる3本の線を描画しています。その違いを観察するために、2本の補助線を引いています。3本の線はそれぞれこの補助線直上を始点および終点として描かれています。</p>
<p>左の線はデフォルトのオプション <code>"butt"</code> の場合の描線で、補助線のところで丁度切れています。2つ目の<code>"round"</code> オプションの場合の線は、補助線の部分の先に半円が追加された格好になっています。右側の<code>"square"</code> オプションによる描線は、線の幅と同じ幅で高さが半分の四角形が追加されています。</p>
<div class="hidden">
<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre>
</div>
<pre class="brush: js">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const lineCap = ['butt', 'round', 'square'];
// Draw guides
ctx.strokeStyle = '#09f';
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(140, 10);
ctx.moveTo(10, 140);
ctx.lineTo(140, 140);
ctx.stroke();
// Draw lines
ctx.strokeStyle = 'black';
for (let i = 0; i < lineCap.length; i++) {
ctx.lineWidth = 15;
ctx.lineCap = lineCap[i];
ctx.beginPath();
ctx.moveTo(25 + i * 50, 10);
ctx.lineTo(25 + i * 50, 140);
ctx.stroke();
}
</pre>
<p>{{EmbedLiveSample("Comparison_of_line_caps", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.CanvasRenderingContext2D.lineCap")}}</p>
<h3 id="WebKitBlink-specific_notes">WebKit/Blink-specific notes</h3>
<ul>
<li>In WebKit- and Blink-based Browsers, a non-standard and deprecated method <code>ctx.setLineCap()</code> is implemented in addition to this property.</li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
<li>The interface defining this property: {{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li>
<li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li>
<li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a></li>
</ul>
|
