JavaScript仿手机锁屏手滑式验证

一个 JavaScript 库 (es6)，可让您创建基于画布的模式锁定屏幕，以保护Web应用程序上的内容。

<canvas id="example"></canvas>

创建新的锁屏图案

const myLock = PatternLock({
      $canvas: document.querySelector('#example')
});

定义高度和宽度

const myLock = PatternLock({
      $canvas: document.querySelector('#example'),
      width: 300, // default
      height: 430 // default
});

定义几行几列

const myLock = PatternLock({
      $canvas: document.querySelector('#example'),
      grid: [3, 3]
});

定义样式

const myLock = PatternLock({
      $canvas: document.querySelector('#example'),
      theme: 'default' // or success, and failure
});

也可以自定义样式

patternLock.setTheme({
  colors: {
    accent: '#1abc9c',     // Accent color for node
    primary: '#ffffff',    // Primary node and line color
    bg: '#2c3e50',         // Canvas background color
  },
  dimens: {
    node_radius: 20,       // Radius of the outer ring of a node
    line_width: 6,         // Thickness of the line joining nodes
    node_core: 8,          // Radius of the inner circle of a node
    node_ring: 1,          // Outer ring thickness
  }
});

画完后可以处理一些事件

myLock.onComplete(({ hash }) => (myRealHash === hash) ? success() : failure());

处理结果

lock.matchHash('MTA1MDA0MzEw')
.onSuccess(() => lock.setTheme('success'))
.onFailure(() => lock.setTheme('failure'));