lineCap 設(shè)置或返回線條的結(jié)束端點(diǎn)樣式
lineWidth 設(shè)置或返回當(dāng)前的線條寬度
lineCap && lineWidth
var c = document.getElementById('mycanvas');
var ctx = c.getContext('2d');
ctx.beginPath();
//lineCap 屬性設(shè)置或返回線條末端線帽的樣式。
//round 向線條的每個(gè)末端添加圓形線帽庐扫。
//square 向線條的每個(gè)末端添加正方形線帽饭望。
ctx.lineCap = "round";
//lineWidth 設(shè)置或返回當(dāng)前的線條寬度
ctx.lineWidth = 15;
ctx.moveTo(30,30);
ctx.lineTo(200,50);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(30,80);
ctx.lineTo(200,50);
ctx.stroke();
lineJoin 屬性設(shè)置或返回所創(chuàng)建邊角的類型，當(dāng)兩條線交匯時(shí)形庭。
lineJoin
var c2 = document.getElementById('mycanvas2');
var ctx2 = c2.getContext('2d');
ctx2.beginPath();
ctx2.lineWidth = 10;
//context.lineJoin="bevel(斜角)|round(圓角)|miter(尖角)";
ctx2.lineJoin = 'round';
ctx2.moveTo(20,20);
ctx2.lineTo(100,50);
ctx2.lineTo(20,100);
ctx2.stroke();
miterLimit 屬性設(shè)置或返回最大斜接長度铅辞。
miterLimit
var c3 = document.getElementById('mycanvas3');
var ctx3 = c3.getContext('2d');
ctx3.beginPath();
ctx3.lineWidth = 10;
ctx3.lineJoin = "miter";
//只有當(dāng) lineJoin 屬性為 "miter" 時(shí)，miterLimit 才有效萨醒。
//正數(shù)斟珊。規(guī)定最大斜接長度。
//如果斜接長度超過 miterLimit 的值富纸，邊角會(huì)以 lineJoin 的 "bevel" 類型來顯示囤踩。
ctx3.miterLimit = 5;
ctx3.moveTo(20,20);
ctx3.lineTo(50,27);
ctx3.lineTo(20,34);
ctx3.stroke();