html5中canvas手势解锁源码解析

本篇文章小编给大家分享一下html5中canvas手势解锁源码解析，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

先放图

demo.html

    
    css">
        body{
            text-align: center;
            background: #305066;
        }
        h4{
            color: #22C3AA;
        }
    


    
    

index.js

(function(){
        /**
         * 实现画圆和划线：
         * 1、添加事件touchstart、touchmove、touchend
         * 2、touchstart判断是否点击的位置处于圆内getPosition，处于则初始化
         * lastpoint、restPoint
         * 3、touchmove做的就是：画圆drawPoint和画线drawLine
         *
         * 实现自动画圆的效果
         * 1、检测手势移动的位置是否处于圆内
         * 2、圆内的话则画圆 drawPoint
         * 3、已经画过实心圆的圆，无需重复检测
         *
         * 实现解锁成功：
         * 1、检测路径是否是对的
         * 2、如果是对的就重置，圆圈变绿
         * 3、不对也重置，圆圈变红
         * 4、重置
         */
        window.canvasLock = function(obj){
            this.height = obj.height;
            this.width = obj.width;
            this.chooseType = obj.chooseType;
        };
        // js方式动态生成dom
        canvasLock.prototype.initDom = function(){
            var wrap = document.createElement('div');
            var str = '
绘制解锁图案
';
            wrap.setAttribute('style','position: absolute;top:0;left:0;right:0;bottom:0;');
            var canvas = document.createElement('canvas');
            canvas.setAttribute('id','canvas');
            canvas.style.cssText = 'background-color: #305066;display: inline-block;margin-top: 15px;';
            wrap.innerHTML = str;
            wrap.appendChild(canvas);
            var width = this.width || 300;
            var height = this.height || 300;
            document.body.appendChild(wrap);
            // 高清屏锁放
            canvas.style.px";
            canvas.style.px";
            canvas.width = width;
            canvas.height = height;
        }
        canvasLock.prototype.drawCle = function(x, y) { // 初始化解锁密码面板
            this.ctx.strokeStyle = '#CFE6FF';
            this.ctx.line;
            this.ctx.beginPath();
            this.ctx.arc(x, y, this.r, 0, Math.PI * 2, true);
            this.ctx.closePath();
            this.ctx.stroke();
        }
        canvasLock.prototype.createCircle = function() {// 创建解锁点的坐标，根据canvas的大小来平均分配半径

            var n = this.chooseType;
            var count = 0;
            this.r = this.ctx.canvas.width / (2 + 4 * n);// 公式计算
            this.lastPoint = [];
            this.arr = [];
            this.restPoint = [];
            var r = this.r;
            for (var i = 0 ; i