Proprietatea lineCap

Proprietatea lineCap stabilește aspectul capătului liniei. Poate lua următoarele valori: butt - capăt plat (implicit), round - capăt rotunjit, square - capăt pătrat.

Sintaxă

context.lineCap = 'butt' sau 'round' sau 'square';

Exemplu

Să desenăm câteva linii și prima să îi stabilim valoarea butt, a doua - round, a treia - square. Acordați atenție liniei roșii - ea marchează începutul stabilit al liniei (iar round și square depășesc dincolo de ea):

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

Vedeți și

proprietatea lineJoin,
care stabilește stilul îmbinării liniilor
proprietatea miterLimit,
care limitează lungimea colțului ascuțit
proprietatea lineCap,
care stabilește aspectul capătului liniei
proprietatea lineWidth,
care stabilește grosimea liniei