纯html无法实现图案锁，必须配合javascript——因其核心逻辑（轨迹记录、顺序校验、连线绘制）依赖js事件监听与dom操作；html仅提供结构，css仅负责样式，均无法处理触摸过程、动态校验或坐标绘图。
纯 HTML 无法实现图案锁，必须配合 JavaScript —— 因为图案锁的核心逻辑（触摸/点击轨迹记录、点序判断、路径连接绘制）完全依赖 JS 的事件监听与 DOM 操作。
为什么不能只用 HTML/CSS 实现图案锁
HTML 是结构标记语言，CSS 负责样式，二者都不具备以下能力：
- 监听用户在九宫格上的按压起点、移动、释放过程
- 动态记录点击顺序并校验是否符合预设密码（如
[0,1,4,5,8]） - 实时绘制连接线（需
canvas或 SVG + JS 坐标计算） - 处理“跳过未激活点”的规则（例如从 0 直连 4，默认激活中间点 2）
所谓“HTML 图案锁”只是前端界面用 HTML 写九宫格结构，真正逻辑全靠 JS 驱动。
touchstart/mousedown 事件怎么绑定到九宫格点上
关键不是给每个 <div class="dot"> 单独绑事件，而是委托到容器，再通过坐标或 <code>dataset 识别目标点：
- 给容器加
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);
});
怎么画出用户滑动的连接线（不依赖第三方库）
推荐用 <canvas></canvas>：比 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 层。
