canvas验证码
程序员文章站
2022-01-15 12:01:16
...
代码如下 :
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
text-align: center;
}
canvas{
background: #ccc;
margin:50px auto;
}
</style>
</head>
<body>
<canvas id="c3" width="120px" height="30px" onclick="change()"></canvas>
</body>
<script>
function change(){
//获取画笔
let c3=document.getElementById('c3');
let ctx=c3.getContext("2d");
//获取验证码字符库,字符串(***实由后端服务器获得***)
let strs="ABCDEFGHJKLMNOPQRSTUVWZYZ78945623"
//1.绘制实心矩形
ctx.fillStyle = rgba(0,255,0.4); //随机色
ctx.fillRect(0,0,120,30);
//2.绘制随机的4位验证码
for(var i=0;i<4;i++){
ctx.fillStyle=rgb(0,255);//随机色
ctx.font="24px SimHei";
ctx.textBaseline="top";
var text=strs[Math.floor(Math.random()*strs.length)];
var x=16+i*25;
ctx.fillText(text,x,3)
}
//3.绘制随机的干扰线(5-7条)
for(var i=0;i<5;i++){
ctx.beginPath();
ctx.strokeStyle=rgba(0,255,0.7);//随机色
ctx.moveTo(zb(0,120),zb(0,30));
ctx.lineTo(zb(0,120),zb(0,30));
ctx.stroke();
}
//4.绘制随机的干扰点(20-30个,半径1px)
for(var i=0;i<20;i++){
ctx.beginPath();
ctx.fillStyle=rgba(0,255);//随机色
ctx.arc(zb(0,120),zb(0,30),1,0,2*Math.PI);
ctx.fill();
}
//封装函数zb,获取随机的x,y坐标
function zb(min,max){
return min+Math.floor((max-min+1)*Math.random())
}
//封装函数rgba,获取随机的颜色
function rgba(min,max,a){
a||(a=0); //透明度设置默认值0,不透明
var r=zb(min,max);
var g=zb(min,max);
var b=zb(min,max);
return `rgba(${r},${g},${b},${a})`
}
//字体不支持透明度,封装函数rgba
function rgb(min,max){
var r=zb(min,max);
var g=zb(min,max);
var b=zb(min,max);
return `rgb(${r},${g},${b})`
}
}
//页面启动后,先调用一次
document.ready=change();
</script>
</html>
上一篇： canvas生成图片验证码
下一篇： canvas验证码