HTML九宫格图案锁实现教程

• 给容器加 touchstart 和 mousedown，避免移动端 click 延迟
• 每个点用 data-index="0" 到 data-index="8" 标识位置
• 事件回调里用 e.target.dataset.index 取当前点序号，而非依赖 e.target.id
• 必须加 e.preventDefault() 防止 iOS 上触发滚动或选中

示例片段：

container.addEventListener('touchstart', e => {
  e.preventDefault();
  const dot = e.target.closest('[data-index]');
  if (dot) handleDotTouch(dot.dataset.index);
});

怎么画出用户滑动的连接线（不依赖第三方库）

推荐用 ：比 SVG 简单，比 CSS transform 连线更可控，且支持贝塞尔曲线平滑效果：

• 初始化时获取 canvas.getContext('2d')，设置 lineWidth 和 strokeStyle
• 每个点中心坐标提前存为数组 const points = [{x:100,y:100}, ...]，索引对应 data-index
• 滑动过程中用 moveTo() + lineTo() 追加线段，最后 stroke()
• 注意清除画布用 clearRect(0,0,canvas.width,canvas.height)，别用 ctx.clearRect() 漏掉参数

不要用 CSS ::after 或绝对定位 div 模拟连线 —— 转角生硬、无法抗锯齿、多点滑动时 DOM 膨胀严重。

密码校验容易漏掉的三个边界条件

实际项目中，90% 的“解锁失败”问题来自这几点没处理：

• 最少连接点数限制：Android 默认是 4，但很多业务要求 ≥5，得在 onUnlock 里先判 pattern.length
• 重复点过滤：用户快速来回滑可能触发同一格多次，需在收集时做 if (!pattern.includes(index)) pattern.push(index)
• 跳点自动激活：从 0 滑到 8，必须检查并插入中间点 4；算法是取两点索引差的 GCD，再等分插值，别简单写死 [0,4,8]

跳点逻辑最易出错 —— 用错索引映射（比如把二维坐标当成一维算）、忽略对角线（0→8 和 2→6 规则不同）、没处理已存在点导致重复插入。

图案锁看着简单，但手势容错、视觉反馈节奏、无障碍支持（比如键盘 tab 导航模式）这些细节，才是真正区分能用和好用的地方。别在 canvas 绘制上省事，也别把密码比对逻辑写进 UI 层。

到这里，我们也就讲完了《HTML九宫格图案锁实现教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！