Canvas 直线连用:画线段-CFANZ编程社区

关键:lineTo(x,y)的多次使用

<body>
    <canvas id="canvas" width="1000px" height="1000px"></canvas>
</body>

<script>
        //获取画布
        let canvas = document.getElementById('canvas');
        //获取画布的上下文
        let ctx = canvas.getContext('2d');
        //开启一条路径
        ctx.beginPath();

        //画线
        ctx.moveTo(100,200);
        ctx.lineTo(100,922);
        ctx.lineTo(455,852);
        ctx.lineTo(788,235);
        
        //着色
        ctx.stroke();
        //结束路径
        ctx.closePath();
    </script>

在这里插入图片描述