17370845950

本文介绍如何在不破坏布局的前提下，使用绝对定位 canvas 在多个文本输入框（如三星图案锁风格）上动态绘制对角连线，并确保用户仍可正常操作输入框。

要在 HTML 输入框上方精准绘制 Canvas 线条（例如模拟 Samsung 图案解锁的对角连接效果），关键在于将 Canvas 作为子元素嵌入到相对定位的容器中，并通过 position: absolute 实现像素级覆盖控制，而非让 Canvas 脱离文档流覆盖整个页面。

✅ 正确实现步骤

1. 为容器设置 position: relative
   这是绝对定位 Canvas 的“参考系”。只有当父容器具有 relative、absolute 或 fixed 定位时，其内部 absolute 子元素才会相对于该容器定位。

2. 将 Canvas 插入容器内（而非 document.body）
   使用 document.getElementById("grid").appendChild(canvas)，确保 Canvas 与输入框处于同一 DOM 层级且共享定位上下文。

3. 设置 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;
   }

4. 动态计算起点与终点坐标（增强实用性）
   若需连接特定输入框（如 #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 事件更新。

✅ 完整可运行示例（精简版）

Draw Diagonal Line

通过以上结构化方案，你不仅能稳定绘制任意两点间的连线，还能轻松扩展为多点路径、拖拽交互、图案识别等高级功能，真正复刻原生 Pattern Lock 的视觉与交互体验。