Thuộc tính lineCap

Thuộc tính lineCap thiết lập kiểu đầu cuối của đường thẳng. Có thể nhận các giá trị sau: butt - đầu cuối phẳng (mặc định), round - đầu cuối bo tròn, square - đầu cuối vuông.

Cú pháp

context.lineCap = 'butt' hoặc 'round' hoặc 'square';

Ví dụ

Hãy vẽ một vài đường thẳng và thiết lập cho đường thứ nhất giá trị butt, đường thứ hai - round, đường thứ ba - square. Chú ý đến đường màu đỏ - nó đánh dấu điểm bắt đầu đã thiết lập của đường thẳng (còn round và square sẽ nhô ra ngoài nó):

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

Xem thêm

thuộc tính lineJoin,
thiết lập kiểu nối của đường thẳng
thuộc tính miterLimit,
giới hạn độ dài của góc nhọn
thuộc tính lineCap,
thiết lập kiểu đầu cuối của đường thẳng
thuộc tính lineWidth,
thiết lập độ dày của đường thẳng