Ιδιότητα lineCap

Η ιδιότητα lineCap ορίζει την εμφάνιση του τέλους της γραμμής. Μπορεί να πάρει τις ακόλουθες τιμές: butt - επίπεδο τέλος (από προεπιλογή), round - στρογγυλεμένο τέλος, square - τετράγωνο τέλος.

Σύνταξη

context.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,
που ορίζει το πάχος της γραμμής