canvas 手写滑动验证

最近菜鸟公司要做一个滑动验证，但是看渡一里面说的是：如果是行为验证的话（自动化图灵测试 —— 一定是服务端验证），后端需要搜集很多东西，包括用户的鼠标轨迹、点击速度等行为，反正就是很复杂，最好上框架，具体见：

https://www.bilibili.com/video/BV1RerqYzEVd/?vd_source=92e798cdb4edf5c278fe66aa04ccd483

但是菜鸟公司不用做这么复杂，就是前端滑动一下，免得别人登录太快的问题，减少攻击次数（其实只是领导感觉有用，其实屁用没有，就是给客户感觉牛皮的样子，手动狗头）！

思路

两个canvas：canvas1上画一张图并用两个圆覆盖在上面（一个正确、一个错误），然后canvas2只画正确的圆覆盖住的那部分图片，然后滑块操作的就是移动整个canvas2，只要停止的X坐标和我设置的正确的X坐标符合一种关系，就验证通过！

实现

菜鸟感觉自己的代码和注释都写得挺好的，这里直接上代码

<script setup>
import {
    ElMessage } from "element-plus";
import {
    onMounted } from "vue";

const props = defineProps({
   
  mistakeValue: {
   
    type: Number,
    default: 3
  }
});

const emit = defineEmits(["pass"]);

// 随机图片
let imgurl = "https://picsum.photos/300/200";

// 绑定滑块值
let value1 = ref(0);
let movecanvas = ref(null);
let loading = ref(false);

// 保存数据，方便验证失败重绘
let rightX, r1, r2, r1y, r2y, errorX;

// 生成一个随机数 30 - 270之间（不能超出边界）
const random = (min = 31, max = 269) => {
   
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

const init = () => {
   
  loading.value = true;
  // 保存正确的偏移值
  rightX = random();
  // 两个圆的半径
  r1 = random(20, 30);
  r2 = r1 - 5;
  // 随机生成两个圆的y坐标(不能超出边界)
  r1y = random(31, 169);
  r2y = random(31