緣由：之前看嗶哩嗶哩官網(wǎng)登錄的時候有一個拼圖驗證碼，很好奇怎么去實現(xiàn)。然后就想著自己弄一個。先給大家看我的最終效果。后面再一點點拆解代碼。

創(chuàng)新互聯(lián)公司服務(wù)項目包括和政網(wǎng)站建設(shè)、和政網(wǎng)站制作、和政網(wǎng)頁制作以及和政網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，和政網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到和政省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

為什么想著寫這個功能呢，主要在于拼圖驗證碼在前端這里會比較復(fù)雜并且深入。相比文字拼寫，12306的圖片驗證碼都沒有拼圖驗證碼對前端的要求來的復(fù)雜，和難。

我總結(jié)下知識點：

1、彈窗功能

2、彈窗基于元素定位

3、元素拖動

4、canvas繪圖

5、基礎(chǔ)邏輯

一、彈窗和彈窗組件

抱歉，這里我偷懶了直接用了elementUI的el-popover組件，所以小伙伴不懂的直接看elementUI官網(wǎng)的說明。

我個人也研究和編寫了這塊的組件功能（基于popper.js）

二、編寫基礎(chǔ)結(jié)構(gòu)

這塊屬于html的基礎(chǔ)內(nèi)容，也就標(biāo)題黨了

三、canvas繪制圖片

1、canvas繪制外部img圖片

代碼：

let?mainDom?=?document.querySelector("#codeImg");let?bg?=?mainDom.getContext("2d");let?width?=?mainDom.width;let?height?=?mainDom.height;let?blockDom?=?document.querySelector("#sliderBlock");let?block?=?blockDom.getContext("2d");
//重新賦值，讓canvas進(jìn)行重新繪制
blockDom.height?=?height;
mainDom.height?=?height;let?imgsrc?=?require("../assets/images/back.jpg");let?img?=?document.createElement("img");
img.style.objectFit?=?"scale-down";
img.src?=?imgsrc;
img.onload?=?function()?{
?bg.drawImage(img,?0,?0,?width,?height);?block.drawImage(img,?0,?0,?width,?height);
};復(fù)制代碼

這里我繪制了兩個canvas，因為一個是背景一個是滑塊

核心在于

let?mainDom?=?document.querySelector("#codeImg");let?imgsrc?=?require("../assets/images/back.jpg");let?bg?=?mainDom.getContext("2d");let?img?=?document.createElement("img");
img.onload?=?function()?{
?bg.drawImage(img,?0,?0,?width,?height);
};
復(fù)制代碼

2、canvas繪制滑塊部分

就是這個圖，這個有一些知識點，不難，但是很復(fù)雜。

代碼部分：

drawBlock(ctx,?xy?=?{?x:?254,?y:?109,?r:?9?},?type)?{
?let?x?=?xy.x,
?y?=?xy.y,
?r?=?xy.r,
?w?=?40;
?let?PI?=?Math.PI;?//繪制
?ctx.beginPath();?//left
?ctx.moveTo(x,?y);?//top
?ctx.arc(x?+?(w?+?5)?/?2,?y,?r,?-PI,?0,?true);
?ctx.lineTo(x?+?w?+?5,?y);?//right
?ctx.arc(x?+?w?+?5,?y?+?w?/?2,?r,?1.5?*?PI,?0.5?*?PI,?false);
?ctx.lineTo(x?+?w?+?5,?y?+?w);?//bottom
?ctx.arc(x?+?(w?+?5)?/?2,?y?+?w,?r,?0,?PI,?false);
?ctx.lineTo(x,?y?+?w);
?ctx.arc(x,?y?+?w?/?2,?r,?0.5?*?PI,?1.5?*?PI,?true);
?ctx.lineTo(x,?y);?//修飾，沒有會看不出效果
?ctx.lineWidth?=?1;
?ctx.fillStyle?=?"rgba(255,?255,?255,?0.5)";
?ctx.strokeStyle?=?"rgba(255,?255,?255,?0.5)";
?ctx.stroke();
?ctx[type]();
?ctx.globalCompositeOperation?=?"xor";
}復(fù)制代碼

解釋下：

參數(shù)是傳入canvas對象

x，y軸數(shù)據(jù)

剪切還是填充的canvas函數(shù)（fill，clip）

繪制難點：（很重要，不然你沒法理解它怎么繪制的）

繪制主要是需要理解這里的繪制是根據(jù)你設(shè)置一個起始點坐標(biāo)，然后你繪制第二次的時候線就會連接到第二個點，依次連接最后回到原點就形成一個完整的圖形。

用的是arc參數(shù)，主要是看這個圖

fill是用于填充繪制的部分，clip是裁剪出繪制的部分，利用這個就可以出現(xiàn)一個扣掉的圖片和一個裁剪出來的圖片。

完成之后就是我的那個函數(shù)了。大家可以直接拿去用。

3、讓元素跟隨鼠標(biāo)點擊之后滑動

這里其實原理非常簡單，就是有一個注意點。

原理：

鼠標(biāo)點擊之后記錄當(dāng)前坐標(biāo)，然后隨著（mousemove）滾動的時候修改元素的left和top值就行了。

還有一點就是鼠標(biāo)快速滑動會導(dǎo)致丟失滑動效果，這里需要用document，不能是元素級別的監(jiān)聽。

元素上面我只需要鑒定按下mousedown

代碼：

//鼠標(biāo)按下drag(e)?{?console.log("鼠標(biāo)按下",?e);?let?dom?=?e.target;?//dom元素
?let?slider?=?document.querySelector("#sliderBlock");?//滑塊dom
?const?downCoordinate?=?{?x:?e.x,?y:?e.y?};?//正確的滑塊數(shù)據(jù)
?let?checkx?=?Number(this.slider.mx)?-?Number(this.slider.bx);?//x軸數(shù)據(jù)
?let?x?=?0;?const?move?=?moveEV?=>?{
?x?=?moveEV.x?-?downCoordinate.x;?//y?=?moveEV.y?-?downCoordinate.y;
?if?(x?>=?251?||?x?<=?0)?return?false;
?dom.style.left?=?x?+?"px";?//dom.style.top?=?y?+?"px";
?slider.style.left?=?x?+?"px";
?};?const?up?=?()?=>?{?document.removeEventListener("mousemove",?move);?document.removeEventListener("mouseup",?up);
?dom.style.left?=?"";?console.log(x,?checkx);?let?max?=?checkx?-?5;?let?min?=?checkx?-?10;?//允許正負(fù)誤差1
?if?((max?>=?x?&&?x?>=?min)?||?x?===?checkx)?{?console.log("滑動解鎖成功");?this.puzzle?=?true;?this.tips?=?"驗證成功";
?setTimeout(()?=>?{?this.visible?=?false;
?},?500);
?}?else?{?console.log("拼圖位置不正確");?this.tips?=?"驗證失敗，請重試";?this.puzzle?=?false;?this.canvasInit();
?}
?};?document.addEventListener("mousemove",?move);?document.addEventListener("mouseup",?up);
}復(fù)制代碼

4、總結(jié)

核心點比較多，寫過之后發(fā)現(xiàn)不難，關(guān)鍵在于去寫

個人該頁面git地址：https://github.com/ht-sauce/dream

該頁面處于項目的

路由訪問為：http://localhost:8080/consumer

5、完整的頁面代碼

最后

喜歡的可以點個關(guān)注嗎，小可樂也不容易呢