CanvasRenderingContext2D: lineCap-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die CanvasRenderingContext2D.lineCap-Eigenschaft der Canvas 2D API bestimmt die Form, die verwendet wird, um die Endpunkte von Linien zu zeichnen.

Hinweis: Linien können mit den Methoden stroke(), strokeRect() und strokeText() gezeichnet werden.

Wert

Einer der folgenden:

"butt"

Die Enden von Linien werden an den Endpunkten abgeschnitten. Standardwert.

"round"

Die Enden von Linien sind abgerundet.

"square"

Die Enden von Linien werden durch Hinzufügen einer Box mit gleicher Breite und halber Höhe der Linienstärke abgeschrägt.

Beispiele

Ändern der Form von Linienenden

Dieses Beispiel rundet die Enden einer geraden Linie ab.

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
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 von Linienenden

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

Die Linie auf der linken Seite verwendet die Standardoption "butt". Sie wird vollständig bündig mit den Leitlinien gezeichnet. Die zweite ist auf die Option "round" eingestellt. Dies fügt ein Halbkreis an das Ende hinzu, der einen Radius hat, der halb so breit wie die Linie ist. Die Linie auf der rechten Seite verwendet die Option "square". Dies fügt eine Box mit gleicher Breite und halber Höhe der Linienstärke hinzu.

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

// 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";
["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

Specification
HTML Standard
# dom-context-2d-linecap-dev

Browser-Kompatibilität

BCD tables only load in the browser

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

Siehe auch