Egenskapen lineCap

Egenskapen lineCap setter utseendet på slutten av en linje. Kan ha følgende verdier: butt - flat ende (standard), round - rundet ende, square - firkantet ende.

Syntaks

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

Eksempel

La oss tegne flere linjer og for den første sette verdien butt, for den andre - round, for den tredje - square. Legg merke til den røde linjen - den markerer det angitte startpunktet for linjen (mens round og square stikker utover 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å

egenskapen lineJoin,
som setter stilen for linjens knekk
egenskapen miterLimit,
som begrenser lengden på en spiss vinkel
egenskapen lineCap,
som setter utseendet på slutten av en linje
egenskapen lineWidth,
som setter tykkelsen på en linje