var canavs = document.getElementById('canvas')
var ctx = canavs.getContext('2d'); // 2d 或者3d
    ctx.beginPath() //  新建一个路径, 绘制指定到这个路径上
    ctx.moveTo(20, 20) // 路径从哪开始
    ctx.lineTo(50, 70) //  添加一个新点，这个点为下一个新点的终点    划线由 新点画到终点
    ctx.lineTo(85, 20)
    ctx.closePath() // 闭合路线
    ctx.stroke() // 划线
    ctx.fill(); // 填充内容区域,生成实心图

 

如图所示：