本文介绍如何在不破坏布局的前提下，使用绝对定位 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 事件更新。
✅ 完整可运行示例（精简版）
<div id="grid"></div>
<button onclick="drawDiagonalLine()">Draw Diagonal Line</button>
<script>
// 渲染 2×2 输入框网格
const grid = document.getElementById("grid");
for (let i = 0; i < 2; i++) {
for (let j = 0; j < 2; j++) {
const input = document.createElement("input");
input.type = "text";
input.id = `cell-${i}-${j}`;
input.maxlength = "1";
input.value = 2 * i + j;
input.pattern = "[A-Za-z]";
input.style.cssText = "width:150px; height:20px; margin:4px; box-sizing:border-box;";
grid.appendChild(input);
}
grid.appendChild(document.createElement("br"));
}
function drawDiagonalLine() {
const canvas = document.createElement("canvas");
const rect = grid.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;
canvas.style.cssText = "position:absolute; left:0; top:0; pointer-events:none; z-index:1;";
grid.appendChild(canvas);
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "#2980b9";
ctx.lineWidth = 8;
ctx.lineCap = "round";
const p1 = document.getElementById("cell-0-0").getBoundingClientRect();
const p2 = document.getElementById("cell-1-1").getBoundingClientRect();
const gx = grid.getBoundingClientRect();
ctx.beginPath();
ctx.moveTo(
p1.left - gx.left + p1.width / 2,
p1.top - gx.top + p1.height / 2
);
ctx.lineTo(
p2.left - gx.left + p2.width / 2,
p2.top - gx.top + p2.height / 2
);
ctx.stroke();
}
</script>
<style>
#grid { position: relative; }
#grid input { font-size: 14px; }
</style>通过以上结构化方案，你不仅能稳定绘制任意两点间的连线，还能轻松扩展为多点路径、拖拽交互、图案识别等高级功能，真正复刻原生 Pattern Lock 的视觉与交互体验。
