本文实例讲述了JS实现滑动拼图验证功能。分享给大家供大家参考,具体如下:
先看一下效果图:
设置画布滑块属性
const l = 42, // 滑块边长
r = 10, // 滑块半径
w = 310, // canvas宽度
h = 155, // canvas高度
PI = Math.PI
const L = l + r * 2 // 滑块实际边长
设置背景图片:
图片链接地址可以自行更换
function getRandomImg() {
return 'https:
上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的。我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图。下面介绍具体步骤。
首先随便找一张图片渲染到canvas上,这里#canvas作为画布,#block作为裁剪出来的小滑块。
var canvas = document.getElementById('canvas')
var