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