Sifa lineCap

Sifa lineCap huweka muonekano wa mwisho wa mstari. Inaweza kukubali maadili yafuatayo: butt - mwisho wa gorofa (kwa default), round - mwisho wa duara, square - mwisho wa mraba.

Syntax

muktadha.lineCap = 'butt' au 'round' au 'square';

Mfano

Wacha tuchore mistari kadhaa na ya kwanza tuweke thamani butt, ya pili - round, ya tatu - square. Zingatia mstari nyekundu - umeashiria mwanzo uliowekwa wa mstari (na round na square huzidi mstari huu):

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

Angalia pia

sifa lineJoin,
ambayo huweka mtindo wa mshikamo wa mstari
sifa miterLimit,
ambayo inapunguza urefu wa kona kali
sifa lineCap,
ambayo huweka muonekano wa mwisho wa mstari
sifa lineWidth,
ambayo huweka unene wa mstari