canvas验证码 - 滑块拼图

　　滑块拼图型的验证方式已经流行起来，多数的实现方式是直接加载两张分割好的图片。现在用canvas去自动修剪图片，节省修图工作量和http请求：

• 加载一张整图，用canvas切割缺口，缺口位置在固定范围内随机
• 点击刷新按钮重新加载和切割
• 滑块响应拖动，实时更新缺口位置
• 拖动结束时计算位置是否匹配，允许一定误差

 　　DOM结构如下：

    <div class="verification">
        <div class="verPicture">
            <!-- 图片未加载时显示提示 -->
            <div class="verLoading">正在加载 ...</div>
            <!-- 刷新按钮 -->
            <div class="verRefresh" title="刷新"></div>
            <!-- 存放图片元素 -->
            <canvas id="verCanvas" width="285" height="145"></canvas>
        </div>
        <div class="verSlider">
            <p>向右滑动滑块填充拼图</p>
            <!-- 滑块 -->
            <div class="verSliderBlock"></div>
        </div>
    </div>

　　图片和canvas大一统一，此例以285*145为准，缺口切成正方形：

    var imgs = ["verify.png", "verify1.png", "verify2.png", "verify3.png", "verify4.png"] // 备用的验证图片
    var imgSrc = imgs[parseInt(Math.random() * 5)]; //随机一个图片地址
    var slider = $(".verSliderBlock")[0];
    var canvas = $("#verCanvas")[0];
    var context = canvas.getContext("2d");
    var img = document.createElement('img');
    var rightDistance; //记录正确的移动距离
    var topDistance; //记录缺口离顶部的距离
    var slideFlag = false; //标记滑块是否处于移动状态
    var origin = 0; //标记移动起始位置的x坐标
    
    // distance标记移动的距离，值改变时触发滑块移动和canvas重绘
    Object.defineProperty(window, "distance", {
        set: function(distance) {
            this.value = distance;
            if (distance > 0 && distance < 246) {
                $(slider).css("left", distance);
                draw(distance);
            } else if (distance <= 0) {
                $(slider).css("left", 0);
                draw(0);
            } else {
                $(slider).css("left", 247);
                draw(247);
            }
        },
        get: function() {
            return this.value;
        }
    });
    initCanvas(imgSrc);

    // 刷新事件
    function verRefresh() {
        unbindSlide();
        imgSrc = imgs[parseInt(Math.random() * 5)];
        slideFlag = false;
        distance = 0;
        origin = 0;
        $(".verSlider p").html("向右滑动滑块填充拼图").removeClass();
        initCanvas(imgSrc);
    }
    $(".verRefresh").click(verRefresh);

    // 判断位置是否正确，用于滑动结束时
    function judgeDistance() {
        if (distance > rightDistance - 3 && distance < rightDistance + 3) {
            $(slider).css("left", 247);
            $(".verSlider p").html("验证成功").removeClass("hide").addClass("success");
            setTimeout(function() {
                console.log("success")
            }, 1000)
        } else {
            distance = 0;
            $(".verSlider p").html("验证失败").removeClass("hide").addClass("fail");
            setTimeout(verRefresh, 1000)
        }
    }

    /**** 滑动监听 ****/

    function onmousedown(e) {
        slideFlag = true;
        $(slider).addClass("active");
        origin = e.x;
    }

    function onmousemove(e) {
        if (slideFlag) {
            // 隐藏滑动提示文字
            $(".verSlider p").addClass("hide");
            //计算位置
            distance = e.x - origin;
        }
    }

    function onmouseup(e) {
        if (slideFlag) {
            slideFlag = false;
            distance = e.x - origin;
            $(slider).removeClass("active");
            judgeDistance()
        }
    }

    function bindSlide() {
        slider.addEventListener("mousedown", onmousedown);
        document.addEventListener("mousemove", onmousemove, true);
        document.addEventListener("mouseup", onmouseup, true);
    }

    function unbindSlide() {
        slider.removeEventListener("mousedown", onmousedown);
        document.removeEventListener("mousemove", onmousemove, true);
        document.removeEventListener("mouseup", onmouseup, true);
    }

    /**** canvas对象 ****/
    function initCanvas(img_src) {
        $(".verLoading").show();
        img.src = img_src;
        img.onload = function() {
            $(".verLoading").hide();
            bindSlide(slider);
            // 获取随机位置
            rightDistance = parseInt(Math.random() * 100 + 145);
            topDistance = parseInt(Math.random() * 80 + 10);
            draw();
        };
    }

    function draw(left) {
        context.clearRect(0, 0, canvas.width, canvas.height)
        // 绘制整图和半透明缺口
        context.drawImage(img, 0, 0, canvas.width, canvas.height);
        context.globalAlpha = 0.9;
        context.fillStyle = "#fff";
        context.fillRect(rightDistance, topDistance, 35, 35);
        context.globalAlpha = 0.5;
        context.strokeStyle = "#000";
        context.lineWidth = 1;
        context.strokeRect(rightDistance, topDistance, 35, 35);
        // 绘制脱离的缺口
        context.globalAlpha = 1;
        context.shadowBlur = 10;
        context.shadowColor = "#fff";
        context.strokeStyle = "#fff";
        context.strokeRect(left || 2, topDistance, 35, 35);
        context.drawImage(img, rightDistance, topDistance, 35, 35, left || 2, topDistance, 35, 35);
    }