当前位置：首页 > JavaScript

js实现图形密码

2026-04-07 14:13:11JavaScript

实现图形密码的基本思路

图形密码通常指用户通过绘制特定图案（如九宫格连线）进行身份验证。JavaScript实现的核心包括绘制交互界面、记录轨迹、验证逻辑三部分。

绘制交互界面

使用HTML5 Canvas创建绘图区域，设置基本样式和事件监听：

<canvas id="patternLock" width="300" height="300"></canvas>

const canvas = document.getElementById('patternLock');
const ctx = canvas.getContext('2d');
const dots = []; // 存储所有点坐标
const userPath = []; // 记录用户绘制路径

// 初始化九宫格点阵
function initDots() {
  const size = 3; // 3x3点阵
  const spacing = canvas.width / (size + 1);

  for (let row = 0; row < size; row++) {
    for (let col = 0; col < size; col++) {
      dots.push({
        x: (col + 1) * spacing,
        y: (row + 1) * spacing,
        active: false
      });
    }
  }
}

处理用户交互

添加鼠标/触摸事件监听器记录轨迹：

js实现图形密码

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', endDrawing);

function startDrawing(e) {
  const pos = getPosition(e);
  checkDotActivation(pos);
  renderCanvas();
}

function draw(e) {
  if (!isDrawing) return;
  const pos = getPosition(e);
  checkDotActivation(pos);
  renderCanvas();
}

function endDrawing() {
  validatePattern();
  resetDrawing();
}

验证逻辑实现

存储和比对预设密码模式：

const correctPattern = [0, 2, 4, 6, 8]; // 示例密码：Z字形

function validatePattern() {
  const pattern = userPath.map(point => 
    dots.findIndex(dot => 
      dot.x === point.x && dot.y === point.y
    )
  );

  const isCorrect = pattern.length === correctPattern.length &&
                   pattern.every((v, i) => v === correctPattern[i]);

  alert(isCorrect ? '验证成功' : '密码错误');
}

完整渲染函数

绘制点和连接线：

js实现图形密码

function renderCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制点
  dots.forEach((dot, index) => {
    ctx.beginPath();
    ctx.arc(dot.x, dot.y, 15, 0, Math.PI * 2);
    ctx.fillStyle = dot.active ? '#3498db' : '#95a5a6';
    ctx.fill();

    // 显示点序号（调试用）
    ctx.fillStyle = 'white';
    ctx.textAlign = 'center';
    ctx.fillText(index, dot.x, dot.y + 5);
  });

  // 绘制连线
  if (userPath.length > 1) {
    ctx.beginPath();
    ctx.moveTo(userPath[0].x, userPath[0].y);
    userPath.slice(1).forEach(point => {
      ctx.lineTo(point.x, point.y);
    });
    ctx.strokeStyle = '#3498db';
    ctx.lineWidth = 3;
    ctx.stroke();
  }
}