lineCap Özelliği

lineCap özelliği, çizgi ucunun görünümünü belirler. Şu değerleri alabilir: butt - düz uç (varsayılan), round - yuvarlatılmış uç, square - kare uç.

Sözdizimi

bağlam.lineCap = 'butt' veya 'round' veya 'square';

Örnek

Birkaç çizgi çizelim ve ilkine butt değerini ayarlayalım, ikincisine - round, üçüncüsüne - square. Kırmızı çizgiye dikkat edin - belirlenen çizgi başlangıcını işaretler (round ve square onun dışına taşar):

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

Ayrıca Bakınız

lineJoin özelliği,
çizgi birleşim yerinin stilini belirler
miterLimit özelliği,
sivri köşenin uzunluğunu sınırlandırır
lineCap özelliği,
çizgi ucunun görünümünü belirler
lineWidth özelliği,
çizgi kalınlığını belirler