Canvas小结（canvas-线条属性）

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 属性设置或返回所创建边角的类型，当两条线交汇时。

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 才有效。
    //正数。规定最大斜接长度。
    //如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。
    ctx3.miterLimit = 5;
    ctx3.moveTo(20,20);
    ctx3.lineTo(50,27);
    ctx3.lineTo(20,34);
    ctx3.stroke();