好资源导航 » 文章资讯 » js canvas实现滑块验证

js canvas实现滑块验证

2023-07-04 06:38:04 105

本文实例为大家分享了jscanvas实现滑块验证的具体代码，供大家参考，具体内容如下

滑块验证

话不多说先上代码想用的小伙伴可以直接使用，想了解的我后面会说下我的思路





.moveSLider{
position:relative;
margin:0auto;
height:50px;
.react{
.yuan{
position:absolute;
left:0;
top:50%;
transform:translate(0,-50%);
width:30px;
height:30px;
background-color:red;
border-radius:50%;
cursor:pointer;
}
position:absolute;
left:0;
top:50%;
transform:translate(0,-50%);
width:100%;
height:20px;
background-color:rosybrown;
}
}
.imgDev{
position:relative;
margin:0auto;
.slider{
position:absolute;
left:0;
top:0;
background-color:transparent;
}
}

这里我总结了下我遇到的难点

1.在开始的时候我不知道怎么画这个拼图的形状，后来百度发现其实很简单，就是用半圆和线拼接起来形成的图形就是拼图的形状

2.怎么能把一个图片只显示拼图那一块呢，这也非常简单就是用ctx.clip()这个函数就可以实现，这里需要注意的是，你要先剪裁然后再加载图片在canvas中不然他就无法剪裁。

关键代码

drawBlock(ctx,width,height,type,img){//这里是二合一函数，可以画出阴影部分也切割出拼图形状的函数
let{w,r,sliderLeft}=this;//w宽度,r圆的半径sliderLeft是滑块的初始位置
//这地方用随机数每次显示的位置都不同
varx=this.random(30,width-w-r-1);//这里最大值为了不让滑块进入隐藏所以要减去滑块的宽度有个半圆所以要减去半圆位置
vary=this.random(10,height-w-r-1);
if(type=="clip"){//这里要保证在两个东西要在同一个y值上
x=sliderLeft;
y=this.y;
}else{
this.x=x;
this.y=y;
}
letPI=Math.PI;
//绘制
ctx.beginPath();
//left
ctx.moveTo(x,y);
//top
ctx.arc(x+(w+5)/2,y,r,-PI,0,true);
ctx.lineTo(x+w+5,y);
//right
ctx.arc(x+w+5,y+w/2,r,1.5*PI,0.5*PI,false);
ctx.lineTo(x+w+5,y+w);
//bottom
ctx.arc(x+(w+5)/2,y+w,r,0,PI,false);
ctx.lineTo(x,y+w);
ctx.arc(x,y+w/2,r,0.5*PI,1.5*PI,true);
ctx.lineTo(x,y);
if(type=="clip"){
ctx.shadowBlur=10;
ctx.shadowColor="black";
}
ctx.lineWidth=1;
ctx.fillStyle="rgba(0,0,0,0.4)";//设置背景颜色
ctx.stroke();
ctx[type]();
if(img){//这里为什么要在这里加载图片呢，因为这个高度是动态的必须计算完之后在放进去
//还有个原因是你要先剪裁在加载图片
ctx.drawImage(img,-this.x,0,width,height);
}
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

js canvas实现滑块验证

热门推荐

随机推荐