js canvas实现滑块验证

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

滑块验证

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

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

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

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

关键代码

drawBlock(ctx, width, height, type, img) {//这里是二合一函数，可以画出阴影部分也切割出拼图形状的函数
 let { w, r, sliderLeft } = this;//w宽度,r圆的半径sliderLeft是滑块的初始位置
 //这地方用随机数每次显示的位置都不同
 var x = this.random(30, width - w - r - 1); //这里最大值为了不让滑块进入隐藏所以要减去滑块的宽度 有个半圆所以要减去半圆位置
 var y = this.random(10, height - w - r - 1);
 if (type == "clip") {//这里要保证在两个东西要在同一个y值上
 x = sliderLeft;
 y = this.y;
 } else {
 this.x = x;
 this.y = y;
 }
 let PI = 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);
 }
},

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