canvas 使用 fill() 填充闭合路径时，偶现边缘像素未被渲染的“漏填”现象，本质是 chromium（尤其 macos arm 设备）gpu 加速渲染中的浮点坐标舍入误差所致；可通过启用 cpu 渲染或简化坐标精度两种方式稳定规避。
canvas 使用 fill() 填充闭合路径时，偶现边缘像素未被渲染的“漏填”现象，本质是 chromium（尤其 macos arm 设备）gpu 加速渲染中的浮点坐标舍入误差所致；可通过启用 cpu 渲染或简化坐标精度两种方式稳定规避。
在基于 Canvas 2D API 构建复杂矢量图形（如贝塞尔曲线构成的封闭区域）时，开发者可能遇到一种看似随机却反复出现的现象：调用 ctx.fill() 后，路径边缘存在一条极细（通常为 1px）的未填充缝隙，尤其在高缩放比例或特定设备（如搭载 Apple Silicon 的 macOS 系统上的 Chrome/Edge）上更为明显。该问题并非路径未闭合或绘图逻辑错误，而是底层 GPU 渲染管线在处理高精度浮点坐标时产生的舍入偏差——当控制点坐标含多位小数（如 209.4390625）并乘以缩放因子（如 * 2）后，计算结果在 GPU 栅格化阶段可能因浮点对齐误差导致填充边界偏移一个亚像素，从而漏掉部分区域。
✅ 推荐解决方案（按优先级排序）
方案一：降低坐标精度（推荐首选）
将原始浮点坐标四舍五入至整数或保留较少小数位，可显著减少舍入不确定性，同时保持视觉一致性：
const canvas = document.getElementById('canvas-element');
const ctx = canvas.getContext('2d');
// ❌ 高精度浮点坐标（易触发渲染误差）
// ctx.bezierCurveTo(209.4390625 * 2, 495 * 2, ...)
// ✅ 整数化坐标（安全、高效、无性能损失）
ctx.bezierCurveTo(
Math.round(209.4390625) * 2, Math.round(495) * 2,
Math.round(209.4390625) * 2, Math.round(235) * 2,
Math.round(228.265625) * 2, Math.round(235) * 2
);
// 后续所有 bezierCurveTo / lineTo 坐标同理整数化
ctx.lineTo(Math.round(378.878125) * 2, Math.round(365 + 600) * 2);
ctx.lineTo(Math.round(209.4390625) * 2, Math.round(365 + 600) * 2);
ctx.closePath();
ctx.stroke();
ctx.fill();✅ 优势：零性能开销，兼容所有环境，不影响硬件加速。
⚠️ 注意：若设计稿依赖亚像素精度（极少见），需评估视觉影响；实践中绝大多数 UI/图表场景整数坐标完全满足需求。
方案二：强制启用 CPU 渲染（备用方案）
通过 getContext('2d', { willReadFrequently: true }) 触发 Chromium 的软件光栅化路径，绕过 GPU 浮点舍入缺陷：
// ⚠️ 仅在方案一不可行时使用
const ctx = canvas.getContext('2d', { willReadFrequently: true });
// 后续绘图代码不变⚠️ 权衡：牺牲 GPU 加速带来的性能优势（尤其在动画或高频重绘场景下可能明显卡顿），且 willReadFrequently 本意是优化 getImageData() 等读取操作，此处属非典型用法。
? 补充说明与验证建议
- 复现条件：该问题在 Chromium 115+ 版本中较常见，macOS + Apple Silicon 组合下复现率最高，Windows/Linux 或 Safari 中极少出现。
- 验证方法：在 Chrome DevTools 的 Rendering 面板中勾选 "FPS Meter" 和 "Paint flashing"，观察漏填区域是否伴随异常栅格化闪烁；也可临时切换 Chrome 的 chrome://flags/#disable-gpu 进行对比测试。
- 根本原因追踪：此问题已作为 Chromium Bug #1472230 提交，官方确认为 GPU 光栅器坐标变换阶段的舍入实现缺陷。
✅ 总结
Canvas 填充漏边的本质是渲染引擎的浮点数值稳定性问题，而非开发者代码错误。优先采用坐标整数化策略——它简单、高效、普适，且符合 Web 图形开发的最佳实践（避免过度依赖亚像素精度）。仅在特殊需求下考虑 CPU 渲染降级方案，并务必进行多设备性能回归测试。
