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

编程入门行业动态更新时间:2024-10-07 06:49:20

基于canvas、JavaScript实现滑动图片<a href=https://www.elefans.com/category/jswz/34/1763243.html style= 拼图验证"/>

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

文章目录

1. 实现效果
2. 实现思路

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 * 2var _y = y - r * 2 + 2 // 滑块实际的y坐标var ImageData = block_ctx.getImageData(x, _y, blockWidth, blockWidth)block.width = blockWidthblock_ctx.putImageData(ImageData, 0, _y)};img.crossOrigin = "Anonymous"img.src = '/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 = 310draw(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 = 2ctx.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))