线条末端帽子<br>
<canvas id="test-canvas" width="800" height="600" style="border:1px solid red;"></canvas>

<script>
var canvas = document.getElementById('test-canvas');
var ctx = canvas.getContext('2d');

//1.画左竖线
ctx.beginPath()
ctx.lineWidth=1;
ctx.moveTo(100, 10)
ctx.lineTo(100, 200)
//2.右竖线
ctx.moveTo(400, 10)
ctx.lineTo(400, 200)
//ctx.closePath();
ctx.stroke();

/*
butt	默认。向线条的每个末端添加平直的边缘。
round	向线条的每个末端添加圆形线帽。
square	向线条的每个末端添加正方形线帽。
*/
//style 1
ctx.beginPath()
ctx.lineWidth=20;
ctx.lineCap="butt" //线条末尾默认
ctx.strokeStyle="blue"
ctx.moveTo(100,30)
ctx.lineTo(400,30)
ctx.stroke();

//style 2
ctx.beginPath()
ctx.lineWidth=20;
ctx.lineCap="round" //线条末尾的形状
ctx.strokeStyle="green"
ctx.moveTo(100,80)
ctx.lineTo(400,80)
ctx.stroke();

//style 3
ctx.beginPath()
ctx.lineWidth=20;
ctx.lineCap="square" //线条末尾的形状
ctx.strokeStyle="red"
ctx.moveTo(100,130)
ctx.lineTo(400,130)
ctx.stroke();
</script>