From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../canvasrenderingcontext2d/linecap/index.html | 131 +++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 files/ja/web/api/canvasrenderingcontext2d/linecap/index.html (limited to 'files/ja/web/api/canvasrenderingcontext2d/linecap') diff --git a/files/ja/web/api/canvasrenderingcontext2d/linecap/index.html b/files/ja/web/api/canvasrenderingcontext2d/linecap/index.html new file mode 100644 index 0000000000..002363d26b --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/linecap/index.html @@ -0,0 +1,131 @@ +--- +title: CanvasRenderingContext2D.lineCap +slug: Web/API/CanvasRenderingContext2D/lineCap +translation_of: Web/API/CanvasRenderingContext2D/lineCap +--- +
{{APIRef}}
+ +
Canvas 2D APIのCanvasRenderingContext2D.lineCap プロパティは、描線の端点の形状を設定します。
+ +
+

Note: 描線は {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}、 {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}、 {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} のメソッドで行われます。

+
+ +

Syntax

+ +
ctx.lineCap = "butt" || "round" || "square";
+
+ +

Options

+ +
+
"butt"
+
端点は四角く切られます。デフォルト値です。
+
"round"
+
端点は丸くなります。
+
"square"
+
端点に線幅と同じ幅で高さが半分の四角形が描き加えられます。
+
+ +

Examples

+ +

線の先端の形を変える

+ +

この例では直線の端点を丸めています。

+ +

HTML

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

JavaScript

+ +
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();
+
+ +

Result

+ +

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

+ +

先端形状の比較

+ +

次の例では、lineCap プロパティがそれぞれ異なる3本の線を描画しています。その違いを観察するために、2本の補助線を引いています。3本の線はそれぞれこの補助線直上を始点および終点として描かれています。

+ +

左の線はデフォルトのオプション "butt" の場合の描線で、補助線のところで丁度切れています。2つ目の"round" オプションの場合の線は、補助線の部分の先に半円が追加された格好になっています。右側の"square" オプションによる描線は、線の幅と同じ幅で高さが半分の四角形が追加されています。

+ + + +
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();
+}
+
+ +

{{EmbedLiveSample("Comparison_of_line_caps", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ + + +

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

+ + + + + +

See also

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