js制作随机四位数验证码图片

<div class="lable lable2"><div class="l"><span>*</span>验证码</div><div class="r"><input type="number" name="vercode"  placeholder="请输入验证码"></div><div class="verCode_div" style="margin-left: 5px;"><canvas id="digitCanvas" width="120" height="40"></canvas></div><a href="javascript:;" class="chang_verCode_img" id="de_chang_verCodeImg"style="font-size: 12px;">换一张</a>
</div>

通过canvas绘制，并在图片中设置随机圆点、横线；

var imgcode;
getimgcode();
function generateRandomNumber() {imgcode = Math.floor(1000 + Math.random() * 9000);}function getimgcode() {const canvas = document.getElementById('digitCanvas');const ctx = canvas.getContext('2d');ctx.clearRect(0, 0, canvas.width, canvas.height);let numToShow = imgcode; // 要显示的数字const fontSize = 30;const animationDuration = 100; // 动画持续时间(ms)const dotCount = 20; // 点的数量const lineCount = 2; // 线的数量// 设置字体样式ctx.font = `bold ${fontSize}px Arial`;// 获取数字的边界框，以便居中显示const numWidth = ctx.measureText(numToShow).width;const centerX = canvas.width / 2;const centerY = canvas.height / 2;// 渐显动画function fadeinText(text, x, y, duration) {return new Promise(resolve => {// 在开始绘制之前清空画布ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.fillStyle = 'black'; // 设置文本颜色为黑色let startOpacity = 0;const step = 1 / (duration / 16.67); // 基于每帧约16.67ms计算步长function animate(currentTime) {if (startOpacity >= 1) {resolve();return;}ctx.globalAlpha = startOpacity;ctx.fillText(text, x, y);startOpacity += step;requestAnimationFrame(animate);}requestAnimationFrame(animate);});}// 绘制随机点function drawRandomDots(count) {for (let i = 0; i < count; i++) {const x = Math.random() * canvas.width;const y = Math.random() * canvas.height;const radius = Math.random() * 3 + 1;ctx.fillStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;ctx.beginPath();ctx.arc(x, y, radius, 0, Math.PI * 2);ctx.fill();}}// 绘制随机线条function drawRandomLines(count) {for (let i = 0; i < count; i++) {ctx.beginPath();ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);ctx.strokeStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;ctx.lineWidth = Math.random() * 3 + 1;ctx.stroke();}}// 主程序async function startAnimation() {await fadeinText(numToShow, centerX - numWidth / 2, centerY + fontSize / 2, animationDuration);drawRandomDots(dotCount);drawRandomLines(lineCount);}// 启动动画startAnimation();}

手动获取随机数，可以在输入时自己进行校验；