canvas-based mobile gesture unlock library

Usage no npm install needed!

<script type="module">
  import chenzesamLock from 'https://cdn.skypack.dev/@chenzesam/lock';



The mobile gesture unlock library, based on canvas.

Simple Use

import Lock from '@chenzesam/lock';

const lock = new Lock({
  container: document.querySelector('class'),
  keyboard: [3, 3]



  • container HTMLElement: the container for place canvas.
  • keyboard [number, number] (optional): the gesture keyboard(default [3, 3]).
  • onResult ((result: number[]) => (Promise | void)) (optional): will callback when the user complete operation(default null).
  • onChange ((result: number[]) => void) (optional): will callback when the user touchmove new circle(default null).
  • errorDuration number (optional): time(ms) of error presentation(default 2000).
  • checkInterval number (optional): time(ms) of check circle transit(default 150).


  • checking: starup checking status.
  • success: starup success status.
  • error: starup error status.
  • destroy: destroy it(remove DOM and unbind events).


  • feat: 绘制功能;

  • feat: 完善功能(成功回调);

  • feat: 添加连线;

  • feat: 错误响应;

  • feat: 支持异步(promise) 检测;

  • doc: 代码结构优化(分离功能);

  • feat: 添加 error, success, loading 方法, 支持外部调用;

  • feat: mouse 事件改为 touch 事件;

  • feat: 拆分出多一层 canvas 作为 checking 交互展示;

  • feat: typescriptify;

  • feat: onChange event;

  • feat: add destroy method;

  • feat: add test;

  • fix: touch 事件的 clientX 和 clientY 转为相对于容器的坐标;

  • fix: 父容器能滚动的情况下会导致坐标计算不准确;