Хосияти lineCap

Хосияти lineCap намуди охири хатро муқаррар мекунад. Метавонад қиматҳои зеринро қабул кунад: butt - охири рост (бо тавре), round - охири гирд, square - охири мураббаъ.

Синтаксис

контекст.lineCap = 'butt' ё 'round' ё 'square';

Мисол

Биёед чанд хат кашем ва аввалашон қимати butt гузорем, дуюмро - round, сеюмро - square. Диққат диҳед ба хати сурх - оғози муқарраркардаи хат бо он нишон дода шудааст (ва round ва square аз он берун мебароянд):

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

Нигаред низ

хосияти lineJoin,
ки услуби шикастании хатро муқаррар мекунад
хосияти miterLimit,
ки дарозии кунҷи тезро маҳдуд мекунад
хосияти lineCap,
ки намуди охири хатро муқаррар мекунад
хосияти lineWidth,
ки ғафсии хатро муқаррар мекунад