效果圖：
20200316.gif
因?yàn)槿羰窃陧?xiàng)目中使用，一般會(huì)根據(jù)后端返回的信息，前端進(jìn)行生成驗(yàn)證碼，所以此處并沒(méi)有針對(duì)驗(yàn)證碼做隨機(jī)處理。
/* 畫(huà)布背景色 */
background: #f1f1f1;
let dotNum = 20; //背景小點(diǎn)數(shù)量
let lineNum = 4; //背景線(xiàn)條數(shù)量
let codeText = "FG2H" //驗(yàn)證碼文字
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.verification_box {
box-sizing: border-box;
display: flex;
}
.code canvas {
display: block;
/* 畫(huà)布背景色 */
background: #f1f1f1;
}
</style>
</head>
<body>
<div class="verification_box">
<div class="code">
<canvas id="code_canvas" width="150" height="60"></canvas>
</div>
</div>
</body>
<script>
let canvas = document.getElementById("code_canvas");
let ctx = canvas.getContext("2d");
let c_w = canvas.width;
let c_h = canvas.height;
let dotNum = 20; //背景小點(diǎn)數(shù)量
let lineNum = 4; //背景線(xiàn)條數(shù)量
let codeText = "FG2H" //驗(yàn)證碼文字
//隨即方法
function random(min, max) {
return Math.random() * (max - min + 1) + min;
}
//定義一個(gè)隨機(jī)顏色
function rndCol() {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")";
}
//畫(huà)小點(diǎn)
function drawDot() {
for (let i = 0; i < dotNum; i++) {
ctx.beginPath();
ctx.fillStyle = "#cccccc";
ctx.arc(Math.random() * c_w, Math.random() * c_h, 1, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
}
}
//畫(huà)線(xiàn)
function drawLine() {
for (let i = 0; i < lineNum; i++) {
let start_x = Math.random() * c_w;
let start_y = Math.random() * c_h;
let end_x = Math.random() * c_w;
let end_y = Math.random() * c_h;
ctx.beginPath();
ctx.strokeStyle = rndCol()
ctx.lineWidth = 2;
ctx.moveTo(start_x, start_y);
ctx.lineTo(end_x, end_y);
ctx.stroke();
ctx.closePath();
}
}
//畫(huà)文字
function drawText() {
let textArray = codeText.split('');
for (let i = 0; i < textArray.length; i++) {
let fs = random(30, 40);//字體的大小
let deg = random(-30, 30);//字體旋轉(zhuǎn)角度
ctx.font = fs + "px Verdana"
ctx.fillStyle = rndCol();
ctx.textBaseline = "top";
// canvas.save()用來(lái)保存先前狀態(tài)的
// canvas.restore()用來(lái)恢復(fù)之前保存的狀態(tài)
// 注：兩種方法必須搭配使用，否則沒(méi)有效果
ctx.save();
ctx.translate(c_w / textArray.length * i + 15, random(15, c_h - 15));
ctx.rotate(deg * Math.PI / 180);
ctx.fillText(textArray[i], -15 + 5, -15);
ctx.restore();
}
}
drawText()
drawDot()
drawLine()
</script>
</html>
