js 结合 canvas 生成验证码

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

function yzm(selector,w,h){

// 随机生成的函数

function rn(min,max){

return parseInt(Math.random()*(max-min) + min)

}

// 随机生成颜色

function rc(min,max){

var r = rn(min,max);

var g = rn(min,max);

var b = rn(min,max);

return `rgb(${r},${g},${b})`

}

// 定义宽高

var w = w;

var h = h;

var canvas = document.querySelector(selector);

var ctx = canvas.getContext('2d');

// 在 canvas 上绘制背景颜色

ctx.fillStyle = rc(180,230)

ctx.fillRect(0,0,w,h)

// 随机字符串

var pool = 'ABCDEFGHIJKLSTPQRSTUVWXYZ123456789';

var result = '';

// 随机生成干扰线

for(var i=0;i<5;i++){

ctx.beginPath();

ctx.moveTo(rn(0,w),rn(0,h));

ctx.lineTo(rn(0,w),rn(0,h));

ctx.strokeStyle = rc(180,230);

ctx.closePath();

ctx.stroke();

}

for(var i=0;i<4;i++){

// 随机的字符

var c = pool[rn(0,pool.length)];

// 随机数字体大小

var fs = rn(18,40)

// 随机数字字母的旋转角度

var deg = rn(-30,30);

ctx.font = fs + 'px Simhei';

ctx.textBseline = 'top';

// 设置字体的填充颜色

ctx.fillStyle = rc(80,150);

ctx.save()

ctx.translate(30* i + 15,15);

ctx.rotate(deg * Math.PI/180);

ctx.fillText(c,-10,15) ;

ctx.restore();

result +=c;

}

// 随机产生40个小的干扰圆点

for(var i=0;i<40;i++){

ctx.beginPath();

ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI);

ctx.closePath();

ctx.fillStyle = rc(150,200);

ctx.fill();

}

return result;

}

var result = yzm("#canvas",120,40);

console.log(result)

</script>

</body>

</html>

posted @ 2020-12-13 16:36 13522679763-任国强阅读(116) 评论(0) 收藏举报

刷新页面返回顶部

Eric

js 结合 canvas 生成验证码

公告

Eric

js 结合 canvas 生成 验证码

公告

js 结合 canvas 生成验证码