使用Canvas绘制单摆时出现多余平行线条问题求助

我帮你找到了导致额外线条出现的核心问题，还有一处拼写错误，现在一步步帮你修正：

1. HTML结构不符合规范 #

你的代码把<body>标签嵌套在了<head>里面，这违反了HTML的结构规则。浏览器虽然会尝试自动修正这种错误，但可能引发一些意外的渲染问题，比如你遇到的额外线条。正确的结构应该是<head>和<body>作为<html>的直接子元素，互不嵌套。

2. Canvas路径未正确拆分管理 #

你只调用了一次beginPath()，之后所有的圆形路径和线条路径都被合并到了同一个路径集合里。当最后调用stroke()时，不仅会画出你想要的两条竖线，还会把两个圆形的轮廓也一并渲染出来——这就是你看到的那条平行额外线条（圆形轮廓的垂直部分）。另外你还写错了fillStyle（写成了fillSytle，少了一个字母l），虽然浏览器可能会用默认黑色填充，但这是不规范的写法。

修正后的完整代码 #

<html>
<head>
</head>
<body>
    <canvas id="Panel" height=500 width=500 style="border: 1px dotted green"></canvas>
    <script>
        var canvas = document.getElementById("Panel");
        var draw = canvas.getContext("2d");

        // 绘制第一个圆形
        draw.beginPath();
        draw.arc(canvas.width/2, 100, 10, 0, 2*Math.PI, false);
        draw.fillStyle = "black";
        draw.fill();
        draw.closePath();

        // 绘制第二个圆形
        draw.beginPath();
        draw.arc(canvas.width/2, 200, 10, 0, 2*Math.PI, false);
        draw.fillStyle = "black";
        draw.fill();
        draw.closePath();

        // 绘制两条竖线
        draw.beginPath();
        draw.moveTo(canvas.width/2, 0);
        draw.lineTo(canvas.width/2, 100);
        draw.moveTo(canvas.width/2, 100);
        draw.lineTo(canvas.width/2, 200);
        draw.stroke();
        draw.closePath();
    </script>
</body>
</html>

关键修改说明 #

• 调整了HTML嵌套结构，让<head>和<body>成为同级元素
• 为每个独立图形（两个圆形、一组线条）分别调用beginPath()和closePath()，避免路径累积导致的额外渲染
• 修正了fillSytle的拼写错误为fillStyle
• 显式补充了arc()的起始角度0，让代码逻辑更清晰

修改后就只会显示你想要的两个黑色圆形和两条竖线，不会再出现额外的线条了。

内容的提问来源于stack exchange，提问作者vasu tomar