Die lineCap Eienskap

Die eienskap lineCap spesifiseer die voorkoms van die einde van 'n lyn. Kan die volgende waardes aanneem: butt - plat einde (verstek), round - afgeronde einde, square - vierkantige einde.

Sintaksis

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

Voorbeeld

Kom ons teken 'n paar lyne en stel vir die eerste een die waarde butt, vir die tweede een - round, vir die derde een - square. Let op die rooi lyn - dit dui die gestelde beginpunt van die lyn aan (en round en square steek daarbuiten uit):

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

Sien ook

die eienskap lineJoin,
wat die styl van 'n lyn se hoek spesifiseer
die eienskap miterLimit,
wat die lengte van 'n skerp hoek beperk
die eienskap lineCap,
wat die voorkoms van die einde van 'n lyn spesifiseer
die eienskap lineWidth,
wat die dikte van 'n lyn spesifiseer