Die lineCap-Eigenschaft

Die Eigenschaft lineCap legt das Aussehen der Linienenden fest. Kann die folgenden Werte annehmen: butt - flaches Ende (Standard), round - abgerundetes Ende, square - quadratisches Ende.

Syntax

Kontext.lineCap = 'butt' oder 'round' oder 'square';

Beispiel

Lassen Sie uns mehrere Linien zeichnen und für die erste den Wert butt setzen, für die zweite - round, für die dritte - square. Achten Sie auf die rote Linie - sie markiert den gesetzten Linienanfang (und round und square ragen darüber hinaus):

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = 'butt';
ctx.moveTo(75, 50);
ctx.lineTo(75, 150);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = 'round';
ctx.moveTo(105, 50);
ctx.lineTo(105, 150);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = 'square';
ctx.moveTo(135, 50);
ctx.lineTo(135, 150);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 1;
ctx.lineCap = 'butt';
ctx.strokeStyle = 'red';
ctx.moveTo(60, 50);
ctx.lineTo(150, 50);
ctx.stroke();

Siehe auch

Eigenschaft lineJoin,
die den Stil des Linienknickes festlegt
Eigenschaft miterLimit,
die die Länge der spitzen Ecke begrenzt
Eigenschaft lineCap,
die das Aussehen der Linienenden festlegt
Eigenschaft lineWidth,
die die Linienstärke festlegt