前端用canvas画一个登陆验证

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

首先我先声明下，前端做验证肯定是不安全的，但是也可以做，搞着玩玩，顺便学习下canvas

我所做的验证码是由数字和字母组成的，先做点准备工作

• 1. 画一个canvas用于展示

<canvas id="code" :width="60" :height="25" style="cursor: pointer;" onclick="codeChange()"></canvas>

2. 获取任意区间的随机数字，用来算随机的颜色和随机的线段、点

let getNumRandom = function (Num) {
    return Math.floor(Math.random()*Num) ;
}

3. 获取随机颜色rgb（r、g、b的取值范围是（0-255））

let getColorRandom = function () {
    let r = getNumRandom(256),
        g = getNumRandom(256),
        b = getNumRandom(256);
    return `rgba(${r}, ${g}, ${b})`;
}

4. 开始绘图

graph TD
获取到canvas --> 清除画布 --> 画随机线 --> 画随机点 --> 画随机数字或字母 

代码如下

let txtAllAll =''; // canvs渲染的所有字母数字，最后用于比对是否填写正确
let canvasW = 60, canvasH = 25; // canvas的大小
let ctx = document.getElementById("code").getContext("2d"); // 获取到canvas
ctx.clearRect(0,0,canvasW,canvasH);  // 清除画布

// 由于得加点观看难度 随机画几个点和线
// 绘制随机线
for(let i = 0; i<lineNum; i++) {
    ctx.beginPath()  // 重新开始新路径
    ctx.moveTo(getNumRandom(canvasW), getNumRandom(canvasH));  // 起点
    ctx.lineTo(getNumRandom(canvasW), getNumRandom(canvasH));  // 到哪
    ctx.strokeStyle = getColorRandom();  // 设置或返回用于笔触的颜色、渐变或模式
    ctx.closePath();  // 闭合路径
    ctx.stroke();  // 绘制已定义的路径
}

// 绘制随机点
for(let i = 0; i<arcNum; i++) {
    ctx.beginPath()  // 重新开始路径
    /**
     * context.arc(x,y,r,sAngle,eAngle,counterclockwise);
     * x: 圆的中心的 x 坐标
     * y: 圆的中心的 y 坐标
     * r: 圆的半径
     * eAngle: 结束角，以弧度计
     * sAngle: 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）
     * counterclockwise: 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针
     * **/
    ctx.arc(getNumRandom(canvasW), getNumRandom(canvasH), 1, 0, 2*Math.PI); 
    ctx.fillStyle = getColorRandom();  // 设置或返回用于填充绘画的颜色、渐变或模式
    ctx.closePath();  //闭合路径
    ctx.fill();  // 填充当前绘制路径
}

// 绘制随机验证码
let codeText = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
for(let i = 0; i<4; i++) {
    // 随机字母数字
    let txt = codeText.split("")[getNumRandom(codeText.length)];
    txtAllAll += txt;  //拿到随机生成的字母数字，方便后面验证
    // 绘制
    ctx.beginPath();
    ctx.font = "18px 微软雅黑";
    ctx.fillStyle = getColorRandom();
    /**
     * context.fillText(text,x,y,maxWidth);
     * text: 规定在画布上输出的文本
     * x: 开始绘制文本的 x 坐标位置（相对于画布）
     * y: 开始绘制文本的 y 坐标位置（相对于画布）
     * */
    ctx.fillText(txt, 15*i, 20);  // 在画布上绘制“被填充的”文本
    ctx.closePath();
}

5. 想刷新就多次点击图片多次渲染随机的字母数字就行
6. 最后可以把form表单所输入的和得到的验证码都转为小写来判断

最后展示下成果：

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情”