点击不能实现画圆划线

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

(function(){
    window.canvasLock= function(obj){
        this.height = obj.height;
        this.width = obj.width;
        this.chooseType = obj.chooseType;
    };
    //动态生成dom
    canvasLock.prototype.initDom = function(){
        var wrap=document.createElement('div');
        var str='<h4 id="title" class="title">绘制解锁图案</h4>';
        wrap.setAttribute('style','position: absolute;top:0;left: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.width= width+"px";
       canvas.style.height=height+"px";
 
       canvas.width = width;
       canvas.height = height;
    }
 
    canvasLock.prototype.drawCle =function(x,y){//初始化解锁密码面板
        this.ctx.strokeStyle = '#cfe6ff';
        this.ctx.lineWidth = 2;
        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(){//创建解锁点的坐标，根 
        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<n; i++){
            for(var j=0; j<n; j++){
                count++;
                var obj = {
                    x:j*4*r+3*r,
                    y:i*4*r+3*r,
                    index:count
                };
                this.arr.push(obj);
            }
        }
        this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height);
        for(var i = 0; i < this.arr.length; i++){
            this.drawCle(this.arr[i].x,this.arr[i].y);
        }
    }
 
    //程序初始化
    canvasLock.prototype.init= function(){
        this.initDom();
        this.canvas = document.getElementById('canvas');
        this.ctx = this.canvas.getContext('2d');
 
        //1.确定半径
        //2.确定每个圆心坐标
        //3.14个半径一行 
        this.createCircle();
        this.bindEvent();
    }
    canvasLock.prototype.bindEvent = function(){
        var self = this;
 
        this.canvas.addEventListener("touchstart",function(e){
            //判断点击的位置是否在圆内
            //lastpoint, 
 
            var po = self.getPosition(e);
            for(var i = 0 ; i < self.arr.length; i ++){
                if(Math.abs(po.x-self.arr[i].x)< self.r&&Math.abs(po.y-self.arr[i].y)< self.r){
 
                    self.touchFlag = true;
                    self.lastPoint.push(self.arr[i]);
                    self.restPoint.splice(i,1);
                    break;
                }
            }
        },false);
 
        this.canvas.addEventListener("touchmove",function(e){
            console.log(111)
            if(self.touchFlag){
                self.update(self.getPositon(e));
            }
        },false);
 
        this.canvas.addEventListener("touchend",function(e){},false);
 
        canvasLock.prototype.getPosition = function(e){
            var rect=e.currentTarget.getBoundingClientRect();
            var po ={
                //触摸点的到视口位置
                x:(e.touches[0].clientX-rect.left),
                y:(e.touches[0].clientY-rect.top)
            };
            return po;
        }
         
        canvasLock.prototype.update = function(po){
           this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height);
 
           for (var i = 0 ; i<this.arr.length ;i++){
             this.drawCle(this.arr[i].x,this.arr[i].y);
           }
 
           this.drawPoint();//画圆
           this.drawLine(po);//
        }
        canvasLock.prototype.drawPoint = function(){
            //初始化圆心
            for(var i = 0 ; i <this.lastPoint.length; i++){
                this.ctx.fillStyle = '#cfe6ff';
                this.ctx.beginPath();
 
                this.ctx.arc(this.lastPoint[i].x,this.lastPoint[i].y,this.r/2,0,Math.PI*2,true);
                this.ctx.closePath();
                this.ctx.fill();
            }
        };
        canvasLock.prototype.drawLine = function(){
            //
            this.ctx.beginPath();
            this.ctx.lineWidth = 3;
            this.ctx.moveTo(this.lastPoint[0].x,this.lastPoint[0].y);
            for(var i = 1; i<this.lastPoint.length; i++){
                this.ctx.lineTo(this.lastPoint[i].x,this.lastPoint[i].y);
 
            }
            this.ctx.lineTO(po.x,po.y);
            this.ctx.stroke();
            this.ctx.closePath();
        };
 
    }
})();

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Document</title>
<style>
body{
text-align: center;
background: #305066;
color
}
h4{
color: #22c3aa;
}
</style>
</head>
<body>
 
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
//1.生成背景
//2.动态title生成
//3.用js动态生成canvas
//4.用js动态生成h3和
new canvasLock({chooseType:3}).init();
</script>
</body>
</html>