如何在 HTML 输入框上叠加绘制 Canvas 对角线_技术教程

本文介绍如何在不破坏布局的前提下，使用绝对定位 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 事件更新。