CanvasRenderingContext2D: lineCap-Eigenschaft

Wert

Einer der folgenden:

"butt"

Die Enden von Linien sind an den Endpunkten abgeflacht. Standardwert.

"round"

Die Enden von Linien sind abgerundet.

"square"

Die Enden von Linien sind durch Hinzufügen eines Kastens mit gleicher Breite und der halben Höhe der Linienstärke abgeflacht.

Beispiele

Ändern der Form von Linienenden

Dieses Beispiel rundet die Endkappen einer geraden Linie ab.

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

Ergebnis

Vergleich der Linienenden

In diesem Beispiel werden drei Linien gezeichnet, jede mit einem anderen Wert für die lineCap-Eigenschaft. Zwei Leitlinien, um die genauen Unterschiede zwischen den dreien zu sehen, werden hinzugefügt. Jede dieser Linien beginnt und endet genau auf diesen Leitlinien.

Die Linie links verwendet die Standardeinstellung "butt". Sie wird komplett bündig mit den Leitlinien gezeichnet. Die zweite ist auf die "round"-Option eingestellt. Dies fügt ein Halbkreis an das Ende hinzu, der einen Radius von der halben Breite der Linie hat. Die Linie rechts verwendet die "square"-Option. Dies fügt einen Kasten mit gleicher Breite und halber Höhe der Linienstärke hinzu.

<canvas id="canvas" width="150" height="150"></canvas>

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Draw guides
ctx.strokeStyle = "#0099ff";
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";
["butt", "round", "square"].forEach((lineCap, i) => {
  ctx.lineWidth = 15;
  ctx.lineCap = lineCap;
  ctx.beginPath();
  ctx.moveTo(25 + i * 50, 10);
  ctx.lineTo(25 + i * 50, 140);
  ctx.stroke();
});

Spezifikationen

Browser-Kompatibilität

WebKit/Blink-spezifische Hinweise

• In WebKit- und Blink-basierten Browsern ist eine nicht standardisierte und veraltete Methode ctx.setLineCap() implementiert, zusätzlich zu dieser Eigenschaft.

Siehe auch

• Das Interface, das diese Eigenschaft definiert: CanvasRenderingContext2D
• CanvasRenderingContext2D.lineWidth
• CanvasRenderingContext2D.lineJoin
• Anwendung von Stilen und Farben