本文介绍如何在不破坏布局的前提下，使用绝对定位 canvas 在多个文本输入框（如三星图案锁风格）上动态绘制对角连线，并确保用户仍可正常操作输入框。
要在 HTML 输入框上方精准绘制 Canvas 线条（例如模拟 Samsung 图案解锁的对角连接效果），关键在于将 Canvas 作为子元素嵌入到相对定位的容器中，并通过 position: absolute 实现像素级覆盖控制，而非让 Canvas 脱离文档流覆盖整个页面。
✅ 正确实现步骤
为容器设置 position: relative
这是绝对定位 Canvas 的“参考系”。只有当父容器具有 relative、absolute 或 fixed 定位时，其内部 absolute 子元素才会相对于该容器定位。将 Canvas 插入容器内（而非 document.body）
使用 document.getElementById("grid").appendChild(canvas)，确保 Canvas 与输入框处于同一 DOM 层级且共享定位上下文。-
设置 Canvas 样式以精准覆盖
#grid { position: relative; } #grid input { width: 150px; height: 20px; box-sizing: border-box; margin: 4px; } #grid canvas { position: absolute; left: 0; top: 0; pointer-events: none; /* 关键：透传鼠标事件给下方 input */ z-index: 1; } -
动态计算起点与终点坐标（增强实用性）
若需连接特定输入框（如 #cell-0-0 → #cell-1-1），可获取其 getBoundingClientRect() 坐标：function drawDiagonalLine() { const canvas = document.createElement("canvas"); const grid = document.getElementById("grid"); canvas.width = grid.offsetWidth; canvas.height = grid.offsetHeight; grid.appendChild(canvas); const ctx = canvas.getContext("2d"); ctx.strokeStyle = "#e74c3c"; ctx.lineWidth = 6; ctx.lineCap = "round"; // 获取两个目标 input 的中心坐标 const start = document.getElementById("cell-0-0").getBoundingClientRect(); const end = document.getElementById("cell-1-1").getBoundingClientRect(); const gridRect = grid.getBoundingClientRect(); const x1 = start.left - gridRect.left + start.width / 2; const y1 = start.top - gridRect.top + start.height / 2; const x2 = end.left - gridRect.left + end.width / 2; const y2 = end.top - gridRect.top + end.height / 2; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); }
⚠️ 注意事项
- ❌ 避免直接修改 innerHTML 循环拼接 DOM（会重置所有已绑定事件和输入状态），建议改用 document.createElement + appendChild 动态构建；
- ✅ 始终添加 pointer-events: none 到 Canvas，否则将拦截点击/聚焦事件，导致输入框无法获得焦点；
- ✅ 使用 box-sizing: border-box 统一输入框尺寸计算，避免 padding/border 导致定位偏移；
- ✅ 若网格响应式变化，应在 draw() 中重新获取 grid 尺寸并重设 canvas.width/height，或监听 resize 事件更新。
✅ 完整可运行示例（精简版）
通过以上结构化方案，你不仅能稳定绘制任意两点间的连线，还能轻松扩展为多点路径、拖拽交互、图案识别等高级功能，真正复刻原生 Pattern Lock 的视觉与交互体验。
