Eigenschap lineCap

De eigenschap lineCap bepaalt het uiterlijk van het einde van een lijn. Kan de volgende waarden aannemen: butt - plat einde (standaard), round - afgerond einde, square - vierkant einde.

Syntaxis

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

Voorbeeld

Laten we enkele lijnen tekenen en voor de eerste de waarde butt instellen, voor de tweede - round, voor de derde - square. Let op de rode lijn - deze markeert het ingestelde begin van de lijn (en round en square steken er overheen):

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

Zie ook

eigenschap lineJoin,
die de stijl van een lijnhoek bepaalt
eigenschap miterLimit,
die de lengte van een scherpe hoek beperkt
eigenschap lineCap,
die het uiterlijk van het einde van een lijn bepaalt
eigenschap lineWidth,
die de dikte van een lijn bepaalt