Egenskaben lineCap

Egenskaben lineCap angiver udseendet af enden af en linje. Kan tage følgende værdier: butt - flad ende (standard), round - afrundet ende, square - firkantet ende.

Syntaks

kontekst.lineCap = 'butt' eller 'round' eller 'square';

Eksempel

Lad os tegne flere linjer og for den første sætte værdien butt, for den anden - round, for den tredje - square. Vær opmærksom på den røde linje - den markerer det fastsatte startpunkt for linjen (mens round og square stikker ud over den):

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

Se også

egenskaben lineJoin,
som angiver stilen for en linjes knæk
egenskaben miterLimit,
som begrænser længden af en spids vinkel
egenskaben lineCap,
som angiver udseendet af enden af en linje
egenskaben lineWidth,
som angiver tykkelsen af en linje