html

<canvas style="width:253px;height:317px" ></canvas>

js

<script>
var ctx = canvas.getContext("2d")

// 我们现在要开始画线了
ctx.beginPath();
// 移动到一个点
ctx.moveTo(100,100)
// 划线  此时绘制的是一个抽象的线段的概念
ctx.lineTo(200, 200)
ctx.lineTo(260,130)
ctx.lineTo(400, 400)
ctx.lineTo(610,10)
// 结束划线，将绘制的线段，封闭
ctx.closePath()
// 设置描边线的大小
ctx.lineWidth= "20"
// 设置线的颜色
ctx.strokeStyle = "red"
//必须用描边命令，才能显示出来
ctx.stroke()
// 设置填充的颜色
ctx.fillStyle="blue"
// 填充
ctx.fill()

</script>

path2D画线

var path = new Path2D()
path.moveTo(100, 100)
path.lineTo(200, 200)
ctx.stroke(path)