lineCap 設置或返回線條的結束端點樣式

lineWidth 設置或返回當前的線條寬度

lineCap && lineWidth

    var c = document.getElementById('mycanvas');
    var ctx = c.getContext('2d');
    ctx.beginPath();
    //lineCap 屬性設置或返回線條末端線帽的樣式。
    //round 向線條的每個末端添加圓形線帽。
    //square 向線條的每個末端添加正方形線帽。
    ctx.lineCap = "round";
    //lineWidth 設置或返回當前的線條寬度
    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 屬性設置或返回所創(chuàng)建邊角的類型，當兩條線交匯時。

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 屬性設置或返回最大斜接長度。

miterLimit

    var c3 = document.getElementById('mycanvas3');
    var ctx3 = c3.getContext('2d');
    ctx3.beginPath();
    ctx3.lineWidth = 10;
    ctx3.lineJoin = "miter";
    //只有當 lineJoin 屬性為 "miter" 時，miterLimit 才有效。
    //正數。規(guī)定最大斜接長度。
    //如果斜接長度超過 miterLimit 的值，邊角會以 lineJoin 的 "bevel" 類型來顯示。
    ctx3.miterLimit = 5;
    ctx3.moveTo(20,20);
    ctx3.lineTo(50,27);
    ctx3.lineTo(20,34);
    ctx3.stroke();