HTML5 Canvas对角线绘制其他线后变粗，如何保持线条粗细一致？

核心问题拆解 #

你遇到的两个核心问题：

• 对角线模糊：和横竖线逻辑一致，1px线宽的线条需要让路径对齐像素边界的中间位置（坐标带0.5偏移），避免线条跨像素渲染产生半透明模糊。
• 对角线重复绘制变粗：Canvas 2D上下文会自动累积路径，每次调用stroke()时，会对上下文内所有未重置的路径重复描边。你的原代码没有重置路径，导致点击按钮画竖线时，旧的对角线路径被反复描边，视觉上越来越粗。

解决方案 #

1. 重置路径避免重复描边 #

每次绘制新线条前，调用ctx.beginPath()清空当前路径集合，确保stroke()仅作用于当前新绘制的路径。

2. 对角线的清晰化处理 #

对角线同样需要让起点和终点都落在半像素坐标（x.5, y.5）上，这样1px宽的线条会以路径为中心向两侧各延伸0.5px，刚好完全覆盖单个像素，不会出现模糊。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<body style="background: black">
    <button id="btn">Draw Next Line</button>
    <br> 
    <canvas style="border: 2px solid red" id="cnv"></canvas>
    <script>
        const ctx = document.getElementById("cnv").getContext("2d");
        const delta = 25;
        const color = 'white';

        const W = window.innerWidth - 80;
        const H = window.innerHeight - 100;
        ctx.canvas.width = W;
        ctx.canvas.height = H;

        ctx.lineWidth = 1;
        ctx.strokeStyle = color;

        // 绘制清晰对角线：起点终点使用半像素坐标
        ctx.beginPath(); // 初始化路径
        ctx.moveTo(0.5, 0.5);
        ctx.lineTo(W - 0.5, H - 0.5);
        ctx.stroke();
        
        // 竖线绘制逻辑
        let i = 0.5;
        document.getElementById("btn").onclick = () => {
            ctx.beginPath(); // 每次绘制前重置路径，避免重复描边旧路径
            ctx.moveTo(i * delta, 0.5);
            ctx.lineTo(i * delta, H - 0.5);
            ctx.stroke();
            i++;
        }
    </script>
</body>
</html>

关键细节说明 #

• beginPath()：必须在每次绘制新图形前调用，它会结束当前路径并创建新的路径集合，确保后续的描边/填充操作只针对当前新路径。
• 半像素坐标规则：对于奇数线宽（如1px），所有路径坐标都使用x.5/y.5格式，让线条中心对齐像素格子边缘，彻底避免跨像素渲染导致的模糊，该规则适用于所有方向的线条。

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