<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html, body { height: 100%; width: 100%; margin: 0; } .box { position: relative; } #canvas { position: relative; z-index: 100; } .slider { position: relative; box-sizing: border-box; border: 1px #E4E7EB solid; border-radius: 3px; width: 400px; height: 40px; } .progress{ position: absolute; height: 100%; background: #00b7ee; } .but { position: relative; background: #ffffff; height: 100%; width: 55px; box-sizing: border-box; border: 1px #E4E7EB solid; border-radius: 3px; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 100; } .but:after { content: '\2794'; font-size: 25px; color: #676D73; } span { position: absolute; top: 10px; left: 140px; z-index: 1; } img { z-index: 1; position: absolute; left: 0; top: 0; width: 400px; height: 200px; } </style> </head> <body> <div class="box"> <canvas id="canvas" width="400" height="200"></canvas> <div class="slider"> <div class="progress"></div> <div class="but"></div> <span> Slide right </span> </div> </div> <script> let doc = document; let canvas = doc.getElementById('canvas'); let ctx = canvas.getContext('2d'); let img = new Image(); img.crossOrigin = '*'; . / / allow cross-domain img SRC = "https://picsum.photos/300". img.onload = function () { doc.querySelector('.box').append(img); let x = canvas.width / 2; Let y = canvas. Height / 2.5; let rect = [x, y + 30, 60, 60]; // Rectangle let middleArc = [x + 9.9, y + 60, 15, math.pi * 0.729, math.pi * 1.27, true]; // rectangle let middleArc = [x + 9.9, y + 60, 15, math.pi * 1.27, true]; // Let topArc = [x + 33, y + 17, 15, 0, math.pi * 2]; // Let rightArc = [x + 72, y + 58, 15, 0, Math.PI * 2]; // Right circle ctx.save(); // Shadow ctx.shadowBlur = 10; ctx.shadowOffsetX = -3; ctx.shadowOffsetY = 5; ctx.shadowColor = "black"; / / cut figure CTX. Arc (... middleArc); ctx.rect(... rect); ctx.arc(... topArc); ctx.moveTo(x, y); ctx.arc(... rightArc); ctx.fillStyle = '#ffffff'; ctx.fill(); ctx.clip(); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); ctx.restore(); let imgData = ctx.getImageData(x - 12, y, 105, 105); function f(mX = 0) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.beginPath(); PutImageData (imgData, mX, y); // Place jigsaw ctx.putImageData(imgData, mX, y); ctx.globalCompositeOperation = "destination-over"; // Blank puzzle ctx.arc(... middleArc); ctx.rect(... rect); ctx.arc(... topArc); ctx.moveTo(x, y); ctx.arc(... rightArc); ctx.fillStyle = '#ffffff'; ctx.fill(); ctx.restore(); } f(); let but = doc.querySelector('.but'); let slider = doc.querySelector('.slider'); let progress = doc.querySelector('.progress'); let moveX = 0; let butLeft = but.getBoundingClientRect().left; let butWidth = but.offsetWidth; let sliderWidth = slider.offsetWidth; let distance = 0; function mouseFunc(e) { distance = e.clientX - moveX - butLeft; if (distance + butWidth >= 400) { distance = sliderWidth - butWidth } else if (distance <= 0) { distance = 0 } progress.style.width = `${distance}px`; but.style.transform = `translateX(${distance}px)`; f(distance); } but.onmousedown = function (e) { but.style.transition = ''; progress.style.transition = ''; moveX = e.clientX - but.getBoundingClientRect().left; doc.body.addEventListener('mousemove', mouseFunc); }; doc.body.onmouseup = function () { let num = (x - 12) - 10; doc.body.removeEventListener('mousemove', mouseFunc); If (distance >= (num-10) && distance <= (num+15)){alert(' success ')}else {progress.style.csstext = 'width:0px; The transition: width 0.5 s'; but.style.cssText = 'transform:translateX(0px); The transition: transform 0.5 s'; f(0); }}; }; </script> </body> </html>Copy the code