Xüsusiyyət lineCap

Xüsusiyyət lineCap xəttin sonunun görünüşünü təyin edir. Aşağıdakı dəyərləri qəbul edə bilər: butt - düz son (standart), round - yumru son, square - kvadrat son.

Sintaksis

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

Nümunə

Gəlin bir neçə xətt çəkək və birincisinə butt dəyərini təyin edək, ikincisinə - round, üçüncüsünə - square. Diqqət edin qırmızı xəttə - o, təyin edilmiş xəttin başlanğıcını qeyd edir (round və square isə onun xaricində qalır):

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

Həmçinin baxın

xüsusiyyət lineJoin,
olan ki, xəttin qırılma stilini təyin edir
xüsusiyyət miterLimit,
olan ki, iti bucağın uzunluğunu məhdudlaşdırır
xüsusiyyət lineCap,
olan ki, xəttin sonunun görünüşünü təyin edir
xüsusiyyət lineWidth,
olan ki, xəttin qalınlığını təyin edir