使用Canvas fill函数填充路径时局部未填充的原因及解决方法

问题诱因 #

• 浮点数精度误差：代码中大量使用带小数的坐标，乘以2后仍为浮点数。Canvas渲染引擎处理亚像素坐标时，计算误差可能导致路径边缘出现肉眼难察的缝隙，fill算法无法识别为完全闭合区域，从而遗漏填充。
• 路径闭合的细微偏差：closePath()会自动连接路径最后一点与起点，但如果两者因浮点计算存在微小坐标差，可能出现视觉闭合但实际路径未完全衔接的情况。
• 填充规则判断异常：默认使用非零环绕填充规则，当路径线段在亚像素级别重叠或交叉时，引擎对填充区域的判断可能出现偏差。

解决办法 #

• 坐标取整处理：将所有坐标通过Math.round()转换为整数，彻底避免亚像素计算误差。这是最直接有效的解决方案。
• 显式闭合路径：在closePath()前手动添加lineTo()连接到路径起点，强化路径的闭合性，不依赖引擎自动连接的逻辑。
• 调整填充规则：尝试设置ctx.fillRule = "evenodd"切换为奇偶填充规则，部分场景下可修正区域判断问题，需根据实际图形测试效果。
• 调整绘制顺序：先执行fill()再执行stroke()，描边可覆盖缝隙视觉效果，但仅为临时修复，建议优先采用坐标取整方案。

修改后的示例代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="xContent"></div>
    <canvas width="1600" height="1600" id="canvas-element"></canvas>
    <script>
        const canvas = document.getElementById('canvas-element')
        const ctx = canvas.getContext('2d')
        
        // 封装坐标取整函数
        const roundCoord = num => Math.round(num);
        
        ctx.bezierCurveTo(
            roundCoord(209.4390625 * 2), roundCoord(495 * 2),
            roundCoord(209.4390625 * 2), roundCoord(235 * 2),
            roundCoord(228.265625 * 2), roundCoord(235 * 2)
        )
        ctx.bezierCurveTo(
            roundCoord(247.09218750000002 * 2), roundCoord(235 * 2),
            roundCoord(247.09218750000002 * 2), roundCoord(40 * 2),
            roundCoord(265.91875000000005 * 2), roundCoord(40 * 2)
        )
        ctx.bezierCurveTo(
            roundCoord(284.74531250000007 * 2), roundCoord(40 * 2),
            roundCoord(284.74531250000007 * 2), roundCoord(560 * 2),
            roundCoord(303.57187500000003 * 2), roundCoord(560 * 2)
        )
        ctx.bezierCurveTo(
            roundCoord(322.3984375 * 2), roundCoord(560 * 2),
            roundCoord(322.3984375 * 2), roundCoord(235 * 2),
            roundCoord(341.225 * 2), roundCoord(235 * 2)
        )
        ctx.bezierCurveTo(
            roundCoord(360.05156250000005 * 2), roundCoord(235 * 2),
            roundCoord(360.05156250000005 * 2), roundCoord(365 * 2),
            roundCoord(378.878125 * 2), roundCoord(365 * 2)
        )
        ctx.lineTo(roundCoord(378.878125 * 2), roundCoord(365 * 2 + 600))
        ctx.lineTo(roundCoord(209.4390625 * 2), roundCoord(365 * 2 + 600))
        // 显式连接到路径起点，确保完全闭合
        ctx.lineTo(roundCoord(209.4390625 * 2), roundCoord(495 * 2))
        ctx.closePath()
        ctx.stroke()
        ctx.fill()
    </script>
</body>
</html>

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