Document

--- theme: cyanosis highlight: a11y-dark --- # 🐯使用div去写验证方式朋友让我写一个纯前端的验证方法，唯唯诺诺的写了一个简单的加减乘除运算，总感觉少了点什么 ![1.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d5977ba5160404b82e3e6d196b21d3d~tplv-k3u1fbpfcp-watermark.image?) 我看了一下可能是少了一个背景，于是我加上了背景 ![2.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92083e5df7a4401b9d622b70db0707df~tplv-k3u1fbpfcp-watermark.image?) ## 贴出此效果--代码 style的内容 ```html ``` body的内容 ```html

正确答案

``` ### 说明一下大致流程： 1. 首先获取结点 2. 利用**randomOption**：这个函数生成随机数，和生成我们小学学过的加减乘除的符号，同时也是为了生成这个算法的答案。该函数中的除法，我采用的是，等到两个数之后，利用乘法获取答案，该答案就是被除者，使用数据交换，在输出数据。（这个效果是为了排除，一味的随机，除不尽问题）。 3. 点击在调用一次**randomOption**函数，就会刷新。 ## 缺陷突然发现，单一的界面没有了干扰图（就那些花花绿绿的圆球与线条），我大胆的想使用div去画，当然这样的想法确实是🐯了。于是我打算采用了**canvas**去画画。、 # 🐯使用canvas画验证方式华丽（花里）胡哨，里面画了球与线段，还让文字发生了旋转 ![3.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0501757c62ec4c588d0bf3cbd9eda5c6~tplv-k3u1fbpfcp-watermark.image?) 采取的canvas技术使用 - 画圆 - 画线段 - 画文字 ## 先说canvas的使用页面中需要有canvas的节点 ```html

``` js中去获取与使用canvas ```js let canvas = document.querySelector('#canvas'); //获取画布 let ctx =canvas.getContext('2d'); //开启的2d的画布 ``` ## 画圆以下是设计代码 ```js //随机数 function randomNumber(number){ return Math.random()*number } //randomRange 画圆的半径大小取值 function drawArc(randomRange){ let x = randomNumber(canvas.width); let y = randomNumber(canvas.height); let r = randomNumber(randomRange)+2; let to16Sting = randomto16Sting(); ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2); ctx.fillStyle = to16Sting; ctx.fill(); ctx.strokeStyle= to16Sting; //为了确保自身的颜色，不被下面的strokeStyle影响 ctx.lineWidth = 1; //为了确保自身的长度，不被下面的lineWidth影响 ctx.stroke(); ctx.closePath(); } ``` 效果图（为看见效果canvas扩大了10倍） ![4.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/44056dbadf214e3e8513aece06627ef9~tplv-k3u1fbpfcp-watermark.image?) ## 画线段以下是设计代码 ```js function drawLine(randomRange){ ctx.beginPath(); let x1 = randomNumber(canvas.width - 10)+10; let y1 = randomNumber(canvas.height - 10)+10; let x2 = randomNumber(canvas.width - 10)+10; let y2 = randomNumber(canvas.height - 10)+10; ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.strokeStyle= randomto16Sting(); ctx.lineWidth=randomNumber(randomRange)+1; ctx.stroke(); ctx.closePath(); } ``` 效果图（为看见效果canvas扩大了10倍） ![5.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f25864346dea435cb8230cea7ddeaa75~tplv-k3u1fbpfcp-watermark.image?) ## 画文字以下是设计代码文字是带有旋转的 ```js //变成16位的 function randomto16Sting (){ return '#'+parseInt(randomNumber(0xFFFFFF)).toString(16); } //画字体 function drawText(dataArray){ // ctx.translate(0,0); ctx.font = "26px Gaoel"; ctx.textAlign ='center'; ctx.textBaseline ='middle'; ctx.fillText(dataArray[0],20,25); ctx.fillStyle = randomto16Sting(); ctx.fillText(dataArray[1],50,25); ctx.fillStyle = randomto16Sting(); ctx.fillText(dataArray[2],80,25); ctx.fillStyle = randomto16Sting(); } ``` 效果图（为看见效果canvas扩大了10倍） ![6.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd93ca47028a4f71b10703ea2a611ffc~tplv-k3u1fbpfcp-watermark.image?) 朋友又又给我提问了，**为什么字体不会旋转那，我看别人的验证码，都是歪歪扭扭的。** 朋友既然提了，那就要搞啊！，自身的面子要装足旋转角度设计代码 ```js function randomRotate(){ let arr = []; let arr1 =[]; let count = 0; //担心随机出的角度太差距，所以写出的一点调整 while(count < 3 ){ switch (count) { case 0: arr.push(randomNumber(10)) break; case 1: arr.push(randomNumber(10)) break; case 2: arr.push(randomNumber(10)) let sum = arr.reduce((a,b) =>{ return a+b; },0) if(Math.max(...arr)/sum > 0.6){ arr[arr.indexOf(Math.max(...arr))] = - sum/(sum*0.6); }else{ arr[arr.indexOf(Math.max(...arr))] = - Math.max(...arr); } arr1 = arr.map(element=>{ return element*Math.PI/180; }) break; default: break; } count ++ ; } //这个是为了存储上一次的数据，为了消除translate的下次旋转以当前位置角度开始。 preRotateDeg.unshift(arr1); return arr1 } ``` 字体使用代码 ```js function drawText(dataArray){ // ctx.translate(0,0); ctx.font = "26px Gaoel"; ctx.textAlign ='center'; ctx.textBaseline ='middle'; let rotateNumber = randomRotate() // 以画布（0，0）作为了旋转点了，需要修正，也就是pre后退一步 ctx.rotate(-preRotateDeg[1][0]) ctx.rotate(rotateNumber[0]); ctx.fillText(dataArray[0],20,25); ctx.fillStyle = randomto16Sting(); ctx.rotate(-preRotateDeg[1][1]) ctx.rotate(rotateNumber[1]); ctx.fillText(dataArray[1],50,25); ctx.fillStyle = randomto16Sting(); ctx.rotate(-preRotateDeg[1][2]) ctx.rotate(rotateNumber[2]); ctx.fillText(dataArray[2],80,25); ctx.fillStyle = randomto16Sting(); } ``` 效果图（为看见效果canvas扩大了10倍） ![7.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20dee446c9b248ab964f654f5d4cb7d8~tplv-k3u1fbpfcp-watermark.image?) # 🐯总体代码 ```html Document

正确答案

``` 效果图： ![8.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/96e93faa9b6847788b687e8a2f43fe2e~tplv-k3u1fbpfcp-watermark.image?) # 🐯结语 **祝你我好运🐮🐯**