RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:9:30-18:00
扫码咨询
关闭右侧工具栏
画布滑动验证的实现示例
  • 作者:admin
  • 发表时间:2021-02-25 07:51
  • 来源:未知

本文主要介绍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之前的文章或继续浏览以下相关文章。希望大家以后多多支持脚本屋!