这期内容当中小编将会给大家带来有关javascript制作滑动图片拼图验证功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

html：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./index.css" > <title>Document</title></head><body> <div class="container"> <canvas width="310" height="155" id="canvas"></canvas> <canvas width="310" height="155" id="block"></canvas> <div class="refreshIcon"></div> <div class="bar"> <div id="bar-mask"> <div class="verSliderBlock"></div> </div> <span id="slide">向右滑动验证</span> </div> </div> <script src="./index.js"></script></body>

css:

*{ margin: 0; padding: 0;}body { background-color: #E8E8E8;}.container{ position: relative;}#canva{ background: indianred;} #block{ position: absolute; left: 0px;}.refreshIcon{ position: absolute; left: 280px; top: 5px; width: 21px; height: 20px; cursor: pointer; background: url(./refresh.png); display: block;}.verSliderBlock{ height: 40px; width: 40px; background-color: #fff; background:url('./right_arrow.png'); background-size:100%; box-shadow: 0 0 3px rgba(0, 0, 0, .3); cursor: pointer; position: absolute; text-align: center; line-height: 40px; color: #45494c; font-size: 25px; font-weight: 400;}.bar{ position: relative; text-align: center; width: 310px; height: 40px; line-height: 40px; margin-top: 15px; background: #f7f9fa; color: #45494c; border: 1px solid #e4e7eb; display: block;}#bar-mask{ position: absolute; left: 0; top: 0; height: 40px; border: 0 solid #1991fa; background: #d1e9fe;}

js:

(function(window){ 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')var refresh = document.querySelector('.refreshIcon')var x = Math.round(Math.random() * 200) + 10, y = Math.round(Math.random() * 100) + 10, w = 42, l = 42, r = 10, PI = Math.PIconsole.log(x,y)//获取图片后面的随机号码function getRandomNumberByRange(start, end) { return Math.round(Math.random() * (end - start) + start)}//初始化图片function initImg(){ img.onload = function () { canvas_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 // 滑块实际的y坐标 var ImageData = block_ctx.getImageData(x, _y, blockWidth, blockWidth) block.width = blockWidth block_ctx.putImageData(ImageData, 0, _y) }; img.crossOrigin = "Anonymous" img.src = 'https://picsum.photos/300/150/&#63;image=' + getRandomNumberByRange(0, 100)}//清除tupianfunction clean(){ x = Math.round(Math.random() * 200) + 10, y = Math.round(Math.random() * 100) + 10, console.log(x,y) canvas_ctx.clearRect(0, 0, 310, 155); block_ctx.clearRect(0, 0, 310, 155) block.width = 310 draw(canvas_ctx, 'fill') draw(block_ctx, 'clip')}//绘制方块function draw(ctx, operation) { ctx.beginPath() ctx.moveTo(x, y) ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI) ctx.lineTo(x + l, y) ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI) ctx.lineTo(x + l, y + l) ctx.lineTo(x, y + l) ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true) ctx.lineTo(x, y) ctx.lineWidth = 2 ctx.fillStyle = 'rgba(255, 255, 255, 0.7)' ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)' ctx.stroke() ctx[operation]() ctx.globalCompositeOperation = 'overlay'}initImg()draw(canvas_ctx, 'fill')draw(block_ctx, 'clip')//添加移动事件var block_slider = document.querySelector("#block");var slider = document.querySelector(".verSliderBlock");var slider_mark = document.querySelector("#bar-mask");//用于判断当前是否是在按住滑块的情况下var yd = falsevar moveX = 0var downX = 0//鼠标按下slider.onmousedown = function (e) { downX = e.clientX; yd = true}//鼠标移动事件function hadleMousemove(e) { if (yd) { moveX = e.clientX - downX; document.querySelector('#slide').innerHTML = '' if (moveX >= 310) { moveX = 310 - 40 } if (moveX > -2) { slider.style.backgroundColor = "#1991FA"; slider_mark.style.borderWidth = "1px" slider_mark.style.borderColor = "#1991fa" slider_mark.style.width = moveX + 40 + "px"; block_slider.style.left = (310 - 40 - 20) / (310 - 40) * moveX + "px"; slider.style.left = moveX + "px"; } }}//鼠标抬起事件function hadleMouseup(e) { if (yd) { slider.onmousemove = null; console.log(moveX) block_slider.style.left = (310 - 40 - 20) / (310 - 40) * moveX + "px"; if (Math.abs((310 - 40 - 20) / (310 - 40) * moveX - x) < 10) { slider.style.background = "url('./success.png')"; slider.style.backgroundSize = '100%' // alert('验证成功') setTimeout(() => { rest(); }, 1000) } else { slider_mark.style.backgroundColor = "#fce1e1" slider_mark.style.borderWidth = "1px" slider_mark.style.borderColor = "#f57a7a" slider.style.backgroundColor = "#f57a7a"; slider.style.background = "url('./fail.png')"; slider.style.backgroundSize = '100%' setTimeout(() => { rest(); }, 1000) } yd = false }}//鼠标在按住滑块下移动slider.onmousemove = function (e) { hadleMousemove(e)}//鼠标在滑块下抬起slider.onmouseup = function (e) { hadleMouseup(e)}//设置全局的移动事件,当鼠标按下滑块后,移动过程中鼠标可能会移出滑块,这是滑块也会监听鼠标的移动进行相应的移动document.addEventListener('mousemove', function (e) { hadleMousemove(e)})document.addEventListener('mouseup', function (e) { hadleMouseup(e)})function rest() { clean() document.querySelector('#slide').innerHTML = '向右滑动验证' slider.style.backgroundColor = "#fff"; slider.style.left = "0px" slider.style.background = "url('./right_arrow.png')"; slider.style.backgroundSize = '100%' block_slider.style.left = "0px" slider_mark.style.width = "0px" slider_mark.style.backgroundColor = "#d1e9fe" slider_mark.style.borderWidth = "0px" slider_mark.style.borderColor = "#d1e9fe" initImg()}//刷新refresh.onclick = function(){ rest()}}(window))

上述就是小编为大家分享的javascript制作滑动图片拼图验证功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。