CanvasRenderingContext2D: lineCap-Eigenschaft

Wert

Einer der folgenden:

"butt"

Die Enden der Linien sind an den Endpunkten gerade abgeschnitten. Standardwert.

"round"

Die Enden der Linien sind abgerundet.

"square"

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

Beispiele

Ändern der Form von Linienenden

Dieses Beispiel rundet die Enden 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 werden hinzugefügt, um die genauen Unterschiede zwischen den drei zu sehen. Jede dieser Linien beginnt und endet genau auf diesen Leitlinien.

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

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

const canvas = document.getElementById("my-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 zusätzlich zu dieser Eigenschaft eine nicht standardisierte und veraltete Methode ctx.setLineCap() implementiert.

Siehe auch

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