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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
---
title: CanvasRenderingContext2D.lineCap
slug: Web/API/CanvasRenderingContext2D/lineCap
translation_of: Web/API/CanvasRenderingContext2D/lineCap
---
<div>{{APIRef}}</div>
<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineCap</code></strong> 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。有3个可能的值，分别是：<code>butt</code>, <code>round</code> and <code>square</code>。默认值是 <code>butt。</code></p>
<p>参见 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a> 中的 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> 章节。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox"><var><em>ctx</em>.lineCap = "butt";
<var><em>ctx</em>.lineCap = "round";
<var><em>ctx</em>.lineCap = "square";</var></var></var></pre>
<h3 id="选项">选项</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="示例">示例</h2>
<h3 id="Using_the_lineCap_property" name="Using_the_lineCap_property">使用 <code>lineCap</code> 属性</h3>
<p>这是一段简单的代码片段，使用 <code>lineCap</code> 属性绘制以圆形结尾的线段。</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]">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();
</pre>
<p>修改下面的代码并在线查看 canvas 的变化：</p>
<div class="hidden">
<h6 id="Playable_code" name="Playable_code">Playable code</h6>
<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();</textarea>
</pre>
<pre class="brush: js">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function() {
textarea.focus();
})
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
</pre>
</div>
<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
<h3 id="A_lineCap_example" name="A_lineCap_example"><code>lineCap</code> 例子</h3>
<p>在这个例子中绘制了3条线段， 每条线段都设置了不同的 <code style="font-style: normal;">lineCap</code> 属性值。通过2条导航线能够精确地看到3条已绘制线段之间的不同。 每条线段的顶端和末端都能在导航线上准确的反映出来。</p>
<p>左侧的线段使用了默认值 <code>butt</code> ， 和导航线是完全平齐的。 第二条线段使用了 <code>round</code> 选项，在线段末端增加了一个半径为线短宽度一半的半圆。右侧的线段使用了 <code>square</code> 选项，增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。</p>
<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d');
var 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 (var 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>
<div class="hidden">
<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre>
</div>
<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p>
<h2 id="规范描述">规范描述</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="浏览器兼容性">浏览器兼容性</h2>
{{Compat("api.CanvasRenderingContext2D.lineCap")}}
<h2 id="参见">参见</h2>
<ul>
<li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li>
<li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li>
</ul>
|
