原生javascript-手势解锁的制作

思路和效果

现在几乎每个app应用都会有手势解锁这一功能，微信支付宝等关键操作的时候都会转到手势解锁，想要在手势解锁这个功能上出彩的话，必须要自己来实现才能个性化的进行手势解锁。比如现在都是9个点画出的图形可能会简单，能被别人轻易试出密码，如果换成30个点那样画出的图形就会相当复杂了，可以增加手势密码的复杂度。另外自己可以指定其各种元素的颜色、线条的粗细等，都可以达到令人耳目一新的效果。本例是在移动端实现的

思路：

效果：

代码实现

    
        * {
            margin: 0px;
            padding: 0px;
            user-select: none;
        }
        
        canvas {
            cursor: pointer;
            width: 300px;
            height: 300px;
        }