基于html5的触摸图案锁。由于考虑到canvas在手机端的性能略差,并且使用canvas清晰度会有所降低,所以这里用div作为基本组件,重新封装了直线和圆的绘制方法。将直线和圆方法提供给Canvas组件,再在Canvas上封装了一层WebLock,最终使用WebLock作为构建的组件。
-
初始化
//使用WebLock类 var wl = new WebLock(document.querySelector('body')); wl.start();
-
绘制结束后事件
//只能有一个结束事件,下一个结束事件会覆盖上一个结束事件 wl.done(function(password){ console.log(password);//sample:[1,2,3,4,5]; })
-
简单配置
//三个配置选项,直线样式,圆普通状态时样式,圆经过时样式 wl.config({ line:{ background:'black', height:'10px', 'border-radius':"10px" }, circle:{ background:'white', border:'1px solid grey' }, active:{ background:'red', border:'1px solid grey' } });
- /dist webpack最终打包压缩后的文件
- /src 各种组件文件
- /test 测试文件
$ npm install
$ webpack -p
$ webpack-dev-server
打开http://localhost:8888 进行调试
$ mocha
请访问 https://cctv1005s.github.io/ (暂时删除了Demo) 仅支持手机端,浏览器端请开启手机调试模式