知识点：ineWidth线宽.默认为1,起始点和终点的连线为中心,上下各占线宽的一半
具体demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="radians" width="300" height="500"></canvas>
</body>
<script>
// lineWidth线宽.默认为1,起始点和终点的连线为中心,上下各占线宽的一半
function draw(){
var canvas =document.getElementById("radians")
if(!canvas.getContext) return;
var ctx=canvas.getContext("2d")
ctx.beginPath()
ctx.moveTo(10,50)
ctx.lineTo(100,50)
ctx.lineWidth=10;
ctx.stroke()
ctx.beginPath()
ctx.moveTo(50,100)
ctx.lineTo(100,100)
ctx.lineWidth=20;
ctx.stroke()
}
draw()
</script>
</html>
原文：https://www.cnblogs.com/Progress-/p/12581258.html