本文主要介绍了在canvas中滑动验证的实现实例，通过实例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。有需要的朋友下面和边肖一起学习。
突发奇想，试试看。
1.页面布局
canvas id=’ canva ‘ width=’ 500px像素’ height=’ 300px像素’/canvas
模式
style type=’text/css ‘
*{
边距：0；
填充：0；
}
#canva{
背景：indianred
}
/风格
射流研究…
脚本类型=’文本/javascript ‘
window.onload=function(){
var can va=document . getelementbyid(‘ can va ‘)；
var CTX=can va . get context(‘ 2d ‘)；
var h=can va . height；
var w=can va . width；
Var rext={ //定义验证块的属性
x:Math.random()*(w-50)，
y:Math.random()*(h-50)，
}
Var={//slider属性
x:“0”，
y:“”
}
rect()；//绘制验证块
Hk(0，rext . y)；//绘制滑块
canva.addEventListener(‘click ‘，function(){
var ev=ev | |事件；
var x=ev.clientX
var y=ev.clientY。
If (x=0x=50y=rext。y y=rext。y 50){//画布内部监控
can va . addevent listener(‘ mousemove ‘，function(ev){
ev=ev | |事件；
ctx.clearRect(hk.x，hk.y，50，50)；//清除滑块
hk . x=ev . clientx；
Hk(hk.x，rext . y)；
//绘制滑块
var hk _ x=ev.clientX
var yz _ x=rext.x
(函数(x，y){
如果(xy xy 50){
Console.log(‘验证成功’)；
}
})(hk_x，yz_x) //判断验证匿名函数
})
}
})//点击事件的处理
函数Rect(){
CTX . fill style=’ white smoke ‘；
ctx.fillRect(rext.x，rext.y，50，50)；
}
函数Hk(x，y){
hk.x=x
hk.y=y
ctx.fillRect(hk.x，hk.y，50，50)；
}
}
/脚本
目前基本效果已经出来了。虽然在验证中存在一些问题，但总体功能已经实现。结束后，我们会在后面逐步完善~
关于canvas滑动验证的实现示例，本文到此为止。更多相关画布滑动验证内容，请搜索脚本之家之前的文章或者继续浏览下面的相关文章。希望大家以后多多支持剧本之家！
来源：剧本之家
链接：https://www.jb51.net/html5/739937.html
