本文主要介绍canvas滑动验证的实现示例，通过示例代码详细介绍，对大家的学习或工作有一定的参考学习价值。需要它的朋友将和边肖一起学习

突然想到的方法，让我们试试

1.页面布局

画布id='canva '宽度='5唐山微信小程序00px '高度=' 300 px '/画布

模式

style type='text/css '

*{

margin : 0；

padd : 0；

}

#canva{

background: indianred

}

/style

射流研究…

脚本类型='text/javascript '

window.onload=function(){

var canva=document . getelementbyid(' canva ')；

var CTX=canva . GetContext(' 2d ')；

var h=canva.height

var w=canva.width

Var rext={ //定义验证块的属性

x : path . random()*(w-50)，

y : path . random()*(h-50)，

}

Var hk={ //slider属性

x:'0 '，

“y:”

}

rect()；//绘制验证块

Hk(0，rext . y)；//绘制滑块

canva.addEventListener('click '，function(){

var ev=ev | | event

var x=ev.clientX

var y=ev.clientY

If (x=0 x=50 y=rext。y y=rext。y 50) {//Canvas内部监控

canva . AddEventListener(' mouse move '，函数(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){

if(xy xy 50){

Console.log('身份验证成功')；

}

})(hk_x，yz_x) //匿名判断验证功能

})

}

})//点击事件的处理

函数Rect(){

ctx.fillStyle=' whitesmoke

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)；

}

}

/script

目前基本效果出来了。虽然验证有问题，但整体功能已经实现。花完了以后以后慢慢改善~

本文介绍了画布滑动验证的实现实例。更多相关的画布滑动验证内容，请搜索Script House之前的文章或继续浏览以下相关文章。希望大家以后多多支持脚本屋！