這篇文章給大家分享的是有關(guān)canvas如何實(shí)現(xiàn)手機(jī)的手勢解鎖的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)東營免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

具體如下：

按照國際慣例，先放效果圖

1、js動態(tài)初始化Dom結(jié)構(gòu)

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

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

加個移動端meta頭

引入index.js腳本

index.js

// 匿名函數(shù)自執(zhí)行
(function(){
    // canvasLock是全局對象
    window.canvasLock=function(obj){
        this.width=obj.width;
        this.height=obj.height;
    }
    //動態(tài)生成DOM
    canvasLock.prototype.initDom=function(){
        //創(chuàng)建一個div
        var div=document.createElement("div");
        var h5="繪制解鎖圖案";
        div.innerHTML=h5;
        div.setAttribute("style","position:absolute;top:0;left:0;right:0;bottom:0;");

        //創(chuàng)建canvas
        var canvas=document.createElement("canvas");
        canvas.setAttribute("id","canvas");
        //cssText 的本質(zhì)就是設(shè)置 HTML 元素的 style 屬性值
        canvas.style.cssText="background:pink;display:inine-block;margin-top:15px;";

        div.appendChild(canvas);
        document.body.appendChild(div);

        //設(shè)置canvas默認(rèn)寬高
        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(){
        //動態(tài)生成DOM
        this.initDom();

        //創(chuàng)建畫布
        this.canvas=document.getElementById("canvas");
        this.ctx=this.canvas.getContext("2d");

    }
})();

在index.html中創(chuàng)建實(shí)例并初始化

new canvasLock({}).init();

效果圖

2、 畫圓函數(shù)

需要補(bǔ)充一下畫布寬度與圓的半徑的關(guān)系

如果一行3個圓，則有4個間距，間距的寬度與圓的直徑相同，相當(dāng)于7個直徑，即14個半徑

如果一行4個圓，則有5個間距，間距的寬度與圓的直徑相同，相當(dāng)于9個直徑，即18個半徑

如果一行n個圓，則有n+1個間距，間距的寬度與圓的直徑相同，相當(dāng)于2n+1個直徑，即4n+2個半徑

補(bǔ)充兩個方法：

//以給定坐標(biāo)點(diǎn)為圓心畫出單個圓
    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=[];//儲存點(diǎn)擊過的圓的信息
        this.arr=[];//儲存所有圓的信息
        this.restPoint=[];//儲存未被點(diǎn)擊的圓的信息
        var r=this.r;

        for(var i=0;i
初始化的時候記得調(diào)用
canvasLock.prototype.init=function(){
        //動態(tài)生成DOM
        this.initDom();

        //創(chuàng)建畫布
        this.canvas=document.getElementById("canvas");
        this.ctx=this.canvas.getContext("2d");

        //繪制出所有的圓
        this.createCircle();
    }
別忘了在index.html中實(shí)例化時傳入?yún)?shù)（一行定義幾個圓）
new canvasLock({circleNum:3}).init();
效果圖
3、canvas事件操作——實(shí)現(xiàn)畫圓和畫線
getPosition方法用來得到鼠標(biāo)觸摸點(diǎn)離canvas的距離（左邊和上邊）
canvasLock.prototype.getPosition=function(e){
        var rect=e.currentTarget.getBoundingClientRect();//獲得canvas距離屏幕的上下左右距離
        var po={
            //鼠標(biāo)與視口的左距離 - canvas距離視口的左距離 = 鼠標(biāo)與canvas的左距離
            x:(e.touches[0].clientX-rect.left),
            //鼠標(biāo)與視口的上距離 - canvas距離視口的上距離 = 鼠標(biāo)距離canvas的上距離
            y:(e.touches[0].clientY-rect.top)
        };
        return po;
    }
給canvas添加 touchstart 事件，判斷觸摸點(diǎn)是否在圓內(nèi)
觸摸點(diǎn)在圓內(nèi)則允許拖拽，并將該圓添加到 lastPoint 中，從 restPoint 中剔除
this.canvas.addEventListener("touchstart",function(e){
            var po=self.getPosition(e);//鼠標(biāo)距離canvas的距離

            //判斷是否在圓內(nèi)
            for(var i=0;i
判斷是否在圓內(nèi)的原理：
圓心的x軸偏移和鼠標(biāo)點(diǎn)的x軸偏移的距離的絕對值小于半徑
并且
圓心的y軸偏移和鼠標(biāo)點(diǎn)的y軸偏移的距離的絕對值小于半徑
則可以判斷鼠標(biāo)位于圓內(nèi)
給touchmove綁定事件，在觸摸點(diǎn)移動時給點(diǎn)擊過的圓畫上實(shí)心圓，并畫線
//觸摸點(diǎn)移動時的動畫
    canvasLock.prototype.update=function(po){
        //清屏，canvas動畫前必須清空原來的內(nèi)容
        this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);

        //以給定坐標(biāo)點(diǎn)為圓心畫出所有圓
        for(var i=0;i
效果圖
4、canvas手勢鏈接操作實(shí)現(xiàn)
在touchmove中補(bǔ)充當(dāng)碰到下一個目標(biāo)圓時的操作
//碰到下一個圓時只需要push到lastPoint當(dāng)中去
        for(var i=0;i
效果圖
5、解鎖成功與否的判斷
//設(shè)置密碼
    canvasLock.prototype.storePass=function(){
        if(this.checkPass()){
            document.getElementById("title").innerHTML="解鎖成功";
            this.drawStatusPoint("lightgreen");
        }else{
            document.getElementById("title").innerHTML="解鎖失敗";
            this.drawStatusPoint("orange");
        }
    }

    //判斷輸入的密碼
    canvasLock.prototype.checkPass=function(){
        var p1="123",//成功的密碼
            p2="";
        for(var i=0;i
大功告成！！下面曬出所有代碼
index.html



    
    
    
    
    



    
    
  

index.js
// 匿名函數(shù)自執(zhí)行
(function(){
    // canvasLock是全局對象
    window.canvasLock=function(obj){
        this.width=obj.width;
        this.height=obj.height;
        this.circleNum=obj.circleNum;
    }
    //動態(tài)生成DOM
    canvasLock.prototype.initDom=function(){
        //創(chuàng)建一個div
        var div=document.createElement("div");
        var h5="繪制解鎖圖案";
        div.innerHTML=h5;
        div.setAttribute("style","position:absolute;top:0;left:0;right:0;bottom:0;");

        //創(chuàng)建canvas
        var canvas=document.createElement("canvas");
        canvas.setAttribute("id","canvas");
        //cssText 的本質(zhì)就是設(shè)置 HTML 元素的 style 屬性值
        canvas.style.cssText="background:pink;display:inine-block;margin-top:15px;";

        div.appendChild(canvas);
        document.body.appendChild(div);

        //設(shè)置canvas默認(rèn)寬高
        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;

    }

    //以給定坐標(biāo)點(diǎn)為圓心畫出單個圓
    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=[];//儲存點(diǎn)擊過的圓的信息
        this.arr=[];//儲存所有圓的信息
        this.restPoint=[];//儲存未被點(diǎn)擊的圓的信息
        var r=this.r;

        for(var i=0;i
感謝各位的閱讀！關(guān)于“canvas如何實(shí)現(xiàn)手機(jī)的手勢解鎖”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
            
            
                        

            本文名稱：canvas如何實(shí)現(xiàn)手機(jī)的手勢解鎖            

            當(dāng)前鏈接：http://weahome.cn/article/jdogoo.html