html中如何制作手势密码,canvas实现手机的手势解锁的步骤详细

本文介绍了canvas手机的手势解锁，分享给大家，顺便给自己留个笔记，废话不多说，具体如下：

按照国际惯例，先放效果图

1、js动态初始化Dom结构

首先在index.html中添加基本样式

body{background:pink;text-align: center;}

加个移动端meta头

引入index.js脚本

index.js

// 匿名函数自执行

(function(){

// canvasLock是全局对象

window.canvasLock=function(obj){

this.width=obj.width;

this.height=obj.height;

}

//动态生成DOM

canvasLock.prototype.initDom=function(){

//创建一个div

var div=document.createElement("div");

var h4="

绘制解锁图案

";

div.innerHTML=h4;

div.setAttribute("style","position:absolute;top:0;left:0;right:0;bottom:0;");

//创建canvas

var canvas=document.createElement("canvas");

canvas.setAttribute("id","canvas");

//cssText 的本质就是设置 HTML 元素的 style 属性值

canvas.style.cssText="background:pink;display:inine-block;margin-top:15px;";

div.appendChild(canvas);

document.body.appendChild(div);

//设置canvas默认宽高

var width=this.width||300;

var height=this.height||300;

canvas.style.width=width+"px";

canvas.style.height=height+"px";

canvas.width=width;

canvas.height=height;

}

//init代表初始化，程序的入口

canvasLock.prototype.init=function(){

//动态生成DOM

this.initDom();

//创建画布

this.canvas=document.getElementById("canvas");

this.ctx=this.canvas.getContext("2d");

}

})();

在index.html中创建实例并初始化

new canvasLock({}).init();

效果图

2、 画圆函数

需要补充一下画布宽度与圆的半径的关系

如果一行3个圆，则有4个间距，间距的宽度与圆的直径相同，相当于7个直径，即14个半径

如果一行4个圆，则有5个间距，间距的宽度与圆的直径相同，相当于9个直径，即18个半径

如果一行n个圆，则有n+1个间距，间距的宽度与圆的直径相同，相当于2n+1个直径，即4n+2个半径

补充两个方法：

//以给定坐标点为圆心画出单个圆

canvasLock.prototype.drawCircle=function(x,y){

this.ctx.strokeStyle="#abcdef";

this.ctx.lineWidth=2;

this.ctx.beginPath();

this.ctx.arc(x,y,this.r,0,2*Math.PI,true);

this.ctx.closePath();

this.ctx.stroke();

}

//绘制出所有的圆

canvasLock.prototype.createCircle=function(){

var n=this.circleNum;//一行几个圆

var count=0;

this.r=this.canvas.width/(4*n+2);//公式计算出每个圆的半径

this.lastPoint=[];//储存点击过的圆的信息

this.arr=[];//储存所有圆的信息

this.restPoint=[];//储存未被点击的圆的信息

var r=this.r;