canvas验证码简单案例

最新推荐文章于 2023-01-31 10:50:52 发布

两棵黄鹂鸣翠柳

最新推荐文章于 2023-01-31 10:50:52 发布

阅读量436

点赞数

分类专栏： case

本文链接：https://blog.youkuaiyun.com/h13783313210/article/details/78920368

版权

case 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用HTML5 Canvas API绘制动态验证码的示例。通过JavaScript实现了包含随机线条、圆点及字母数字组合的验证码生成器，并允许用户点击重绘。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0;margin:0;}
#can{
border:1px solid #666;
}
</style>
</head>
<body>
<canvas id='can'>

</canvas>
<script>
//创建2d渲染区域以及初始化
var c = document.getElementById('can');
var ctx = c.getContext("2d");
var res;
function ran(a,b){
return Math.floor(Math.random()*(b-a+1))+a;
}
//draw函数
function draw(){
res="";
ctx.clearRect(0, 0, 300, 150)
//线
for(var i= 0;i<80;i++){
ctx.strokeStyle = "rgba("+ran(0,255)+","+ran(0,255)+","+ran(0,255)+","+ran(0,100)/100+")";
ctx.beginPath();
ctx.lineWidth = ran(1,4);
ctx.moveTo(ran(0,300), ran(0,150));
ctx.lineTo(ran(0,300), ran(0,150));
ctx.stroke();
}
//圆点
for(var i= 0;i<80;i++){
ctx.beginPath();
ctx.fillStyle = "rgba("+ran(0,255)+","+ran(0,255)+","+ran(0,255)+","+ran(0,100)/100+")";
ctx.arc(ran(0,300),ran(0,150),ran(1,8),0,2*Math.PI);
ctx.fill();
}
//字符
var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
for(var i=0;i<4;i++){
var strRan = str[ran(0,35)];
ctx.fillStyle = "rgb("+ran(0,255)+","+ran(0,255)+","+ran(0,255)+")"
ctx.font = ran(50,80)+"px 微软雅黑"
ctx.fillText(strRan,i*50+50,100);
res+=strRan;
}
console.log(res)
}
draw();
c.onclick = draw;
</script>
</body>
</html>