CanvasRenderingContext2D: lineJoin-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.lineJoin-Eigenschaft der Canvas 2D API bestimmt die Form, die verwendet wird, um zwei Liniensegmente an ihrem Treffpunkt zu verbinden.

Diese Eigenschaft hat keinen Effekt, wenn zwei verbundene Segmente die gleiche Richtung haben, da in diesem Fall kein Verbindungsbereich hinzugefügt wird. Degenerierte Segmente mit einer Länge von null (d. h. mit allen End- und Kontrollpunkten genau an derselben Position) werden ebenfalls ignoriert.

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

Wert

Für diese Eigenschaft gibt es drei mögliche Werte: "round", "bevel" und "miter". Der Standardwert ist "miter".

Drei horizontale Zickzacklinien mit den Werten rund, abgeschrägt und Gehrung, von oben nach unten gezeigt.

"round"

Rundet die Ecken einer Form ab, indem ein zusätzlicher Kreissektor gefüllt wird, der am gemeinsamen Endpunkt der verbundenen Segmente zentriert ist. Der Radius dieser abgerundeten Ecken entspricht der Linienbreite.

"bevel"

Füllt einen zusätzlichen dreieckigen Bereich zwischen dem gemeinsamen Endpunkt der verbundenen Segmente und den separaten äußeren rechteckigen Ecken jedes Segments.

"miter"

Verbundene Segmente werden verbunden, indem ihre Außenkanten bis zu einem einzigen Punkt verlängert werden, mit dem Effekt, dass ein zusätzlicher rautenförmiger Bereich gefüllt wird. Diese Einstellung wird durch die miterLimit-Eigenschaft beeinflusst. Standardwert.

Beispiele

Ändern der Verbindungen in einem Pfad

Dieses Beispiel wendet abgerundete Linienverbindungen auf einen Pfad an.

HTML

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

JavaScript

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

ctx.lineWidth = 20;
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(190, 100);
ctx.lineTo(280, 20);
ctx.lineTo(280, 150);
ctx.stroke();

Ergebnis

Vergleich von Linienverbindungen

Das folgende Beispiel zeichnet drei verschiedene Pfade und demonstriert jede der drei lineJoin-Optionen.

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

["round", "bevel", "miter"].forEach((join, i) => {
  ctx.lineJoin = join;
  ctx.beginPath();
  ctx.moveTo(-5, 5 + i * 40);
  ctx.lineTo(35, 45 + i * 40);
  ctx.lineTo(75, 5 + i * 40);
  ctx.lineTo(115, 45 + i * 40);
  ctx.lineTo(155, 5 + i * 40);
  ctx.stroke();
});

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

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

Siehe auch