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();