基于canvas、JavaScript实现滑动图片拼图验证

最新推荐文章于 2024-05-19 10:56:30 发布

笑看、人世间@

最新推荐文章于 2024-05-19 10:56:30 发布

阅读量986

点赞数 1

分类专栏： JavaScript HTML5 前端技巧文章标签： javascript canva可画前端

本文链接：https://blog.csdn.net/weixin_48353638/article/details/132206550

版权

前端技巧同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

HTML5

2 篇文章 0 订阅

订阅专栏

1. 实现效果

在这里插入图片描述

2. 实现思路

在这里插入图片描述

序号	类型	类或ID	作用
1	canvas	canvas	完整显示图片原图，并在原图上显示待拼图区域
2	canvas	block	显示拼图图片，浮于canvas上方，随滑块5的移动而移动，开始尺寸及内容与canvas保持一致，然后保存滑动拼图图片后宽度变窄
3	div	refreshIcon	刷新按钮，点了重置程序
4	div	bar-mask	开始与5重叠，宽度随着5的移动变化，目的是大致显示滑块向右移动的距离
5	div	verSliderBlock	滑块，响应鼠标按下、移动和按起事件，鼠标按起时判断拼图是否拼合，由于y方向没有变化，只需判断x方向的吻合情况即可
6	span	slide	显示提示信息，开始时提示向右滑动验证，鼠标按起时显示验证结果

程序最重要的是滑块5，其它元素都随5的移动而变化。程序的大致运行逻辑如下：

随机生成拼图图片左上角起始位置；
在canvas和block中绘制图片，然后重新设置block的宽度，并在block中将还是方形的拼图图片从原始位置复制到左侧水平起始位置；
在canvas中以填充方式绘制不规则的拼图区域，并在block中以剪切方式绘制不规则的拼图区域，此时页面中block只会显示剪切区域的图形，也即拼图图片；
定义滑块5的鼠标按下、移动和按起事件响应函数；
用户移动滑块5，松开鼠标时自动判断block和canvas中的拼图图片位置重合情况（小于10个像素），显示验证结果，并在1秒后自动重置程序。

代码如下：
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.PI
console.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/?image=' + getRandomNumberByRange(0, 100)
}
//清除tupian
function 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 = false
var moveX = 0
var 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))