Canvas绘制线条直接上代码需要注意的是，canvas的宽和高需要在html中设置属性，如果在css中设置属性，里面

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas test</title>
    <style>
    </style>
</head>
<body>
<canvas id="drawing" width="1000" height="1000">
</canvas>
<script>
    // 获取canvas的dom对象
    let drawing = document.getElementById("drawing");

    if (drawing.getContext) {
        let context = drawing.getContext("2d");
        context.strokeStyle = "#000";
        context.lineWidth=1;

        context.beginPath();

        context.moveTo(0, 140);
        context.lineTo(30, 100);

        context.stroke()
        context.closePath()
    }
</script>
</body>
</html>

需要注意的是，canvas的宽和高需要在html中设置属性，如果在css中设置属性，里面画的线会被拉的很大很模糊
strokeStyle表示线条颜色
lineWidth表示线条宽度
beginPath表示开始绘制
moveTo是不画线，将光标移动到坐标点
lineTo是从光标当前坐标点到传进去的坐标点绘制线条
stroke表示将直线填充
closePath表示结束绘制