成都創(chuàng)新互聯(lián)是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷策劃、小程序開發(fā)、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動(dòng)互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立10余年以來，已經(jīng)為1000多家成都衛(wèi)生間隔斷各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)?，F(xiàn)在，服務(wù)的1000多家客戶與我們一路同行，見證我們的成長；未來，我們一起分享成功的喜悅。

上圖為網(wǎng)易云盾的滑動(dòng)拼圖驗(yàn)證碼，其應(yīng)該有一個(gè)專門的圖片庫，裁剪的位置是固定的。我的想法是，隨機(jī)生成圖片，隨機(jī)生成位置，再用canvas裁剪出滑塊和背景圖。下面介紹具體步驟。

首先隨便找一張圖片渲染到canvas上，這里#canvas作為畫布，#block作為裁剪出來的小滑塊。

<canvas width="310" height="155" id="canvas"></canvas>
<canvas width="310" height="155" id="block"></canvas>
var canvas = document.getElementById('canvas')
 var block = document.getElementById('block')
 var canvas_ctx = canvas.getContext('2d')
 var block_ctx = block.getContext('2d')
 var img = document.createElement('img')
 img.onload = function() {
  canvas_ctx.drawImage(img, 0, 0, 310, 155)
  block_ctx.drawImage(img, 0, 0, 310, 155)
 };
 img.src = 'img.jpg'

下面考慮如何裁剪出拼圖的形狀，拼圖形狀比較復(fù)雜，首先我們畫一個(gè)正方形，接著上邊的代碼寫：

var x = 150, y = 40, w = 42, r = 10, PI = Math.PI 
 function draw(ctx) {
  ctx.beginPath()
  ctx.moveTo(x, y)
  ctx.lineTo(x + w, y)
  ctx.lineTo(x + w, y + w)
  ctx.lineTo(x, y + w)
  ctx.clip()
 }
 draw(canvas_ctx)
 draw(block_ctx)

x,y為正方形左上角的坐標(biāo)，現(xiàn)在先隨便寫后邊生成的時(shí)候用隨機(jī)數(shù)，w為正方形的邊長，r為后邊畫缺口的圓的半徑。我們先把繪圖過程用函數(shù)封裝起來，方便后面同時(shí)操作背景和滑塊。用clip()方法裁剪圖片后生成一個(gè)正方形。

接下來畫正方形上邊和右邊的圓形：

function draw(ctx) {
  ctx.beginPath()
  ctx.moveTo(x,y)
+  ctx.lineTo(x+w/2,y)
+  ctx.arc(x+w/2,y-r+2, r,0,2*PI) //
+  ctx.lineTo(x+w/2,y)
  ctx.lineTo(x+w,y)
+  ctx.lineTo(x+w,y+w/2)
+  ctx.arc(x+w+r-2,y+w/2,r,0,2*PI) //
+  ctx.lineTo(x+w,y+w/2)
  ctx.lineTo(x+w,y+w)
  ctx.lineTo(x,y+w)
  ctx.lineTo(x,y)
  ctx.clip()
 }

兩處注釋的位置將圓心往內(nèi)偏移了2px，實(shí)現(xiàn)缺口的樣式。然后是左邊空心的部分，由于clip是裁剪路徑內(nèi)的部分，因此直接像上面畫圓是不行的，我們開啟一條新的路徑，然后畫圓將這個(gè)正方形“遮蓋”出一個(gè)缺口，這里會(huì)用到 globalCompositeOperation 屬性，'xor'顧名思義。代碼接上邊：

function draw(ctx) {
  ctx.beginPath()
  ...
  ctx.lineTo(x,y)
  ctx.clip()
+  ctx.beginPath()
+  ctx.arc(x,y+w/2, r,1.5*PI,0.5*PI) // 只需要畫正方形內(nèi)的半圓就行，方便背景圖片的裁剪
+  ctx.globalCompositeOperation = "xor"
+  ctx.fill()
}

現(xiàn)在一個(gè)基本的拼圖形狀有了，我們調(diào)整#block的大小，并將裁剪出來的滑塊放入#block中：

img.onload = function() {
  ctx.drawImage(img, 0, 0, 310, 155)
  block_ctx.drawImage(img, 0, 0, 310, 155)
+  var blockWidth = w + r * 2
+  var _y = y - r * 2 + 2 // 滑塊實(shí)際的y坐標(biāo)
+  var ImageData = block_ctx.getImageData(x, _y, blockWidth, blockWidth)
+  block.width = blockWidth
+  block_ctx.putImageData(ImageData, 0, _y)
 }

現(xiàn)在我們需要把左邊畫布展示原來的圖片，并且摳掉中間滑塊的部分，這里畫路徑的過程都是一樣的，唯一不同只是clip()那里改成fill()即可實(shí)現(xiàn)效果，我們前面已經(jīng)把畫路徑的過程封裝成函數(shù)了，稍作改動(dòng)即可：

- function draw(ctx) {
+ function draw(ctx, operation) {
  ...
- ctx.clip()
+ ctx.fillStyle = '#fff'
+ ctx[operation]()
  ...
}
+ draw(canvas_ctx, 'fill')
+ draw(block_ctx, 'clip')

接下來就是寫樣式了，略過：

然后就是寫拖動(dòng)事件，我們可以在鼠標(biāo)按下時(shí)記錄鼠標(biāo)位置，然后在拖動(dòng)時(shí)給滑塊設(shè)置left值。最后在松開鼠標(biāo)時(shí)，判斷滑塊此時(shí)的left值和最開始裁剪滑塊時(shí)的x值，如果在一定范圍內(nèi)就算驗(yàn)證通過，否則驗(yàn)證失敗。

最后再加上隨機(jī)圖片和隨機(jī)剪切位置，基本就ok了。另外可以判斷下鼠標(biāo)移動(dòng)時(shí)y軸的變化，以判斷是否是“人”在操作，當(dāng)然web安全這塊神魔亂舞的，我就不班門弄斧了，只是做個(gè)簡單判斷就行。

由于沒有給切片邊緣加上邊框或者陰影，導(dǎo)致某些圖片的滑塊可識(shí)別度不高，需要后邊完善下（其實(shí)是我還沒折騰出來- -），希望懂這塊的大神幫我完善下//

后邊代碼比較雜亂，就不貼上來了， 查看完整代碼點(diǎn)這里 演示地址 點(diǎn)這里

總結(jié)

以上所述是小編給大家介紹的js+canvas實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證碼功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！

網(wǎng)站欄目：js+canvas實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證碼功能
文章出自：http://jinyejixie.com/article26/ppjecg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、靜態(tài)網(wǎng)站、小程序開發(fā)、品牌網(wǎng)站設(shè)計(jì)、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)