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è)置或返回最大斜接長(zhǎng)度。

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ī)定最大斜接長(zhǎng)度。
    //如果斜接長(zhǎng)度超過 miterLimit 的值，邊角會(huì)以 lineJoin 的 "bevel" 類型來顯示。
    ctx3.miterLimit = 5;
    ctx3.moveTo(20,20);
    ctx3.lineTo(50,27);
    ctx3.lineTo(20,34);
    ctx3.stroke();