原生js+canvas实现图片滑块拖放验证效果代码-html代码-BFW代码库

代码语言：html
所属分类：拖放
代码描述：原生js+canvas实现图片滑块拖放验证效果代码，可以设置多个图片
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
 
        .sliderModel {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            display: none;
         
        }
        .sliderModel .cont{padding: 20px; width: 280px; background: #fff;border-radius: 6px;margin: 50px auto;}
        .showMessage {
            text-align: center;
            font-size: 14px;
            height: 30px;
            line-height: 30px;
            /*避免活动的过程中选择文字*/
            -moz-user-select:none;
            -webkit-user-select:none;
            user-select:none;   
        }
       
        #canvas_wrap{
            width: 280px;
        }
        #canvas_wrap canvas{
            display: block; 
        }
 
    </style>
</head>
 
<body>
  <div class="sliderModel">
      <div class="cont">
         <div id="canvas_wrap"></div>
         <div class="showMessage"></div>
      </div>
      <div id="close">关闭</div>
   </div>
   <div id="open">打开</div>

<script >
    (function(){
    function slider(params){
        var obj={
            el:params.el,
            w:params.w || 280, //canvas的宽度
            h:params.h || 150,  //canvas的高度
            range:params.range || 5, //相差多少像素内触发成功
            imgArr:params.imgArr || [], //图片数组
            sliderW:36, //slider的边长
            sliderIcon:params.sliderIcon || '',
            refresh:params.refresh, //刷新回调
            finish:params.finish , //完成回调
 
        };
 
           //创建canvas的父元素
           var container=document.querySelector(obj.el);
           container.innerHTML='';
           var canvas_wrap=document.createElement('div');
           canvas_wrap.className="canvas_wrap";
           canvas_wrap.style.cssText="position:relative;overflow:hidden;border-radius:4px;width:"+obj.w+"px;height:"+obj.h+"px;background:#fff"
       //创建大小canvas元素
           var bigCanvas=document.createElement('canvas');
           var smartCanvas=bigCanvas.cloneNode(true);
           bigCanvas.width=smartCanvas.width=obj.w;
           bigCanvas.height=smartCanvas.height=obj.h;
           bigCanvas.style.cssText=smartCanvas.style.cssText="position:absolute;left:0;top:0";
           var bcxt=bigCanvas.getContext('2d'),scxt=smartCanvas.getContext('2d'),img=new Image();
       //创建标题和刷新按钮
          var titleDom=document.createElement('div');
          var refreshDom=document.createElement('div');
          titleDom.className="slider_title";
          refreshDom.className="slider_refresh";
          titleDom.style.cssText="position:relative;width:"+obj.w+"+px;height:60px;text-align:center;font-size:18px; line-height:60px";
          refreshDom.style.cssText="position:absolute;top:0;right:14px;font-size:14px;color:green;cursor: pointer";
          titleDom.innerHTML="图形验证";
          refreshDom.innerHTML="刷新";
 
       //创建拖拽区域
         var slider_wrap=document.createElement('div'),slider=document.createElement('div'),sliderCover=document.createElement('div');
           slider_wrap.className="slider_wrap";
           slider.className="canvas_slider";
           sliderCover.className="sliderCover";
           slider_wrap.innerText="拖动左边滑块完成上方拼图";
           slider_wrap.style.cssText="width:"+obj.w+"px;height:30px; border-radius:30px;line-height:30px; position:relative;margin-top:10px;text-align:center;box-shadow: inset 0 0 4px #ccc;font-size: 14px;color:#999";
           slider.style.cssText="cursor: pointer;position: absolute;left: 0;top: 50%;z-index: 2;height: "+obj.sliderW+"px;width: "+obj.sliderW+"px;background:rgb(0, 124, 255) url("+obj.sliderIcon+") no-repeat center;background-size: 60% 60%;border-radius: "+obj.sliderW+"px;line-height:"+obj.sliderW+"px;text-align:center;transform: translateY(-50%);";
           sliderCover.style.cssText="position: absolute;left: 0;top:0;width:0;height:100%;background:#eee;border-radius:30px;"
          
           slider_wrap.appendChild(slider);
           slider_wrap.appendChild(sliderCover);
           canvas_wrap.appendChild(bigCanvas);
           canvas_wrap.appendChild(smartCanvas);
           titleDom.appendChild(refreshDom);
           container.appendChild(titleDom);
           container.appendChild(canvas_wrap);
           container.appendChild(slider_wrap);
       
        
        var canvasCoverL=0,startDownX=0,smartCanvasBL=0,sliderMaxRange=obj.w-obj.sliderW;  
        /*
        canvasCoverL:随机生成占位块canvas的x轴位置
        startDownX://鼠标按下时x轴位置
        smartCanvasBL: 可移动canvas的left初始值
        sliderMaxRange：slider可移动的最大距离
        */
 
        //生成canvas图案
        function creatCanvas(){
            //重置初始值
            canvasCoverL=0;startDownX=0;smartCanvasBL=0;  
            slider.style.left = sliderCover.style.width = 0;
 
            var l= 40, //滑块的正方形边长，不包括小圆点
            r = 10,   //小圆点半径
            PI = Math.PI,
            sliderW=l+2*r, //滑块边长
            rand=canvasSize(sliderW,r), //获取随机生成的x,y,left值
            x = canvasCoverL= rand.x,  //占位块x轴
            y = rand.y;  //占位块y轴
            
            smartCanvasBL=rand.left;
            //先清空画布
            bcxt.clearRect(0, 0, obj.w, obj.h)
            scxt.clearRect(0, 0, obj.w, obj.h)
            smartCanvas.width=obj.w;
 
            var srcIndex=Math.floor(Math.random()*(obj.imgArr.length-1));
            img.src=obj.imgArr[srcIndex];
            draw(scxt,x,y,l,r,PI,'clip');
            draw(bcxt,x,y,l,r,PI,'fill');
            img.onload = function() { //一定要在onload里调用，否则canvas里不能放进图片
                bcxt.drawImage(img,0,0,obj.w,obj.h);
                scxt.drawImage(img,0,0,obj.w,obj.h);
                //裁剪滑块长度
                var ImageData = scxt.getImageData(x, y-2*r, sliderW, sliderW)
                smartCanvas.width = sliderW;
                smartCanvas.style.left=rand.left+"px";
                scxt.putImageData(ImageData, 0, y-2*r)
            } 
            obj.refresh && obj.refresh();
        }
 
        //随机生成canvas滑块和占位块，到左边的距离和到顶部的距离
        function canvasSize(cw,r){
           // cw为占位块和的宽度，r为绘制圆点的半径
           var random =Math.random();
           var x=Math.floor(obj.w/2 + random*(obj.w/2 - cw)); //x为占位块x坐标位置，保证占位块始终在画布的右半区域
           var y=Math.floor(r*2+random*(obj.h - cw - r*2)); //y为占位块y坐标位置,（值至少为小圆半径的2倍才能完全显示，因为绘制的原点是小正方形的左上角）
           var left =Math.floor(random*(obj.w/2 - cw)); //canvas滑块的left值，这里的值范围保证它始终在画布的左半区域
           return {x:x,y:y,left:left}
        }
 
        //绘制canvas滑块和占位块
        function draw(ctx,x,y,l,r,PI,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 = 1
                ctx.fillStyle = 'rgba(200, 200, 200, 1)'
                ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'
                ctx.stroke()
                ctx[operation]()
                ctx.globalCompositeOperation = 'destination-over'
          }
        
 
        
 
        //滑块被按下
        function moveStart(e){
            var ev = e || window.event;
            startDownX = ev.touches!=undefined?  ev.touches[0].clientX : ev.clientX; 
            // 解决开始滑动时文字被选中的bug
            document.onselectstart = function() { return false; }; 
        }
        //滑块移动
        function moveProcess(e){
            var ev = e || window.event,downX = (ev.touches!=undefined)?  ev.touches[0].clientX : (startDownX!=0? ev.clientX : 0),range=downX-startDownX;
          console.log(downX)
            var sliderRange= range<=0? 0 : (range<sliderMaxRange ? range : sliderMaxRange);
            slider.style.left=sliderRange+"px";
            sliderCover.style.width=obj.sliderW/2 + sliderRange +"px";
            smartCanvas.style.left=smartCanvasBL+sliderRange+"px";
        }
 
        //停止滑动
        function moveEnd(e){
            document.ontouchmove = null;
            document.onmousemove = null;
            document.onselectstart = null;
            var ev = e || window.event;
            var smartCanvasL= parseInt(smartCanvas.style.left);
            if(Math.abs(canvasCoverL - smartCanvasL) < obj.range){
                obj.finish && obj.finish(true);
            }else{
                obj.finish && obj.finish(false);
                var timer = null,step = 10;
                var sliderL = parseInt(slider.style.left)
                timer = setInterval(function () {
                    sliderL -= step;
                    step += 5;
                    if (sliderL <= 0) {
                        clearInterval(timer);
                        sliderL = 0;
                        slider.style.left = sliderCover.style.width = 0;
                        smartCanvas.style.left = smartCanvasBL + "px"
                    }
                    slider.style.left =  sliderL + "px";
                    sliderCover.style.width = sliderL+obj.sliderW/2 +"px";
                    smartCanvas.style.left = sliderL + smartCanvasBL+ "px";
                }, 20)
            }
 
        }
        
        
       //事件调用
        creatCanvas();
        refreshDom.onclick=refreshDom.ontouchstart=creatCanvas;
        slider.ontouchstart=function(){
            moveStart();
            document.ontouchmove=moveProcess;
            document.ontouchend=moveEnd;
        };
        slider.onmousedown=function(){
            moveStart();
            document.onmousemove=moveProcess;
            document.onmouseup=moveEnd;
        };
       
    }
 
    window.$newSlider=slider
})()

    
</script>
<script>
    function showMessage(msg,color){
        var showMessage = document.querySelector('.showMessage');
        showMessage.innerHTML=msg;
        showMessage.style.color=color;
    }
    var obj={
        el:'#canvas_wrap',
        w:280,
        h:150,
        imgArr:['data:image/png;base64,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.........完整代码请登录后点击上方下载按钮下载查看