Skip to content

Latest commit

 

History

History
46 lines (42 loc) · 2.18 KB

README.md

File metadata and controls

46 lines (42 loc) · 2.18 KB

Zlock.js H5手势密码

Build Status npm

  • Zlock.js 手势密码, 移动端轻量级插件
  • 使用canvas绘制
  • 不参与Model层逻辑

移动端下展示效果

移动端图片显示

DEMO查看

扫扫更方便 ^_^
功能列表

  • 支持n维矩阵
  • 支持颜色配置
  • 对外提供良好的接口
  • 通过gulp构建
  • 代码分工明确,易扩展维护

使用方法

建立<canvas>元素 并设置id

<body>
    <canvas id="lock"><canvas>
</body>

引入js, 初始化密码保存对象(pwdArr), 并初始化Zlock对象

var zlock = new Zlock({
        matrixNum: 3,                               //矩阵为 matrixNum * matrixNum 默认为 3 * 3矩阵
        bdColor: "rgba(16,16,16,0.8)",              //背景蒙层色 默认为 rgba(16,16,16,0.8)
        solidColor: "#ccccdd",                      //连接线的颜色 默认值 为 "#ccccdd" 
        selectedColor: "rgba(255,255,255,0)",       //选择后的空心圆颜色 默认为透明且透过蒙层
        errorColor: "#ee6666",                      //调用error()方法实现的颜色 默认值为 "#ee6666"
        successColor: "#5bc0de",                    //调用seccess()方法显示的颜色 默认值为 "#5bc0de"
        canvasId: "lock",                           //canvas id
        pwdObj: pwdObj                              //接口对象 后续介绍                            
    });

关于pwdObj接口对象