杰网资源 Design By www.escxy.com
本文实例为大家分享了js+canvas实现验证码的具体代码，供大家参考，具体内容如下
效果展示：
源码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
canvas {
border: 1px solid #000;
vertical-align: bottom;
}
input {
padding: 0;
width: 120px;
height: 30px;
vertical-align: bottom;
border: 1px solid #000;
}
</style>
<input type="text" name="textContent" placeholder="输入">
<canvas id="can" width="120" height="30"></canvas>
<button>提交</button>
<script>
/*1、背景颜色时随机的
* 2、其中的内容是随机的
* 3、内容的颜色 随机的
* 4、每个字的旋转度数随机的
* 5、文本的大小随机的
* 6、干扰线的位置随机的
* 7、干扰线的颜色随机的
* 8、干扰点
* */
var btn = document.querySelector("button");
var can = document.querySelector("canvas");
var ctx = can.getContext("2d");
var text = "0123456789abcdefghijklmnopqrstuvwsyzABCDEFGHIGKLMNOPQRSTUVWSYZ";
//设置4个内容 将canvas 平分成4分 然后让内容在1/4的空间旋转缩放
//原理 ：每次都是位移旋转之后再回复原位
for (var i = 0; i < 4; i++) {
var txt = text[randNum(0,text.length-1)];
ctx.fillStyle = getRandColor(80,150);
ctx.font=randNum(12,25)+"px '宋体'";
ctx.textBaseline = "top";
var x = randNum(0,10);
var deg = randNum(-30,30);
ctx.translate(x+30*i,0);
ctx.rotate(Math.PI/180*deg);
ctx.fillText(txt,0,0);
ctx.rotate(Math.PI/180*-deg);
ctx.translate(-(x+30*i),0);
}
/*干扰点*/
for(var i=0;i<30;i++){
ctx.beginPath();
ctx.arc(randNum(0,120),randNum(0,30),1,0,Math.PI*2);
ctx.fillStyle=getRandColor(150,180);
ctx.fill();
}
/*干扰线*/
for(var i=0;i<4;i++){
ctx.beginPath();
ctx.moveTo(randNum(0,120),randNum(0,30));
ctx.lineTo(randNum(0,120),randNum(0,30));
ctx.strokeStyle=getRandColor(150,180);
ctx.lineWidth= randNum(1,2);
ctx.stroke();
}
/* 获取随机色值*/
// a 先获取一个随机数
console.log(Math.random()); //产生一个0~1之间的随机小数
var num = Math.random() * (100 - 30 + 1) + 30; //产生一个随机数30~100 之间的数
console.log(num);
// b 获取一个区间段的随机数(整数)
function randNum(min, max) {
return parseInt(Math.random() * (max - min + 1) + min);
}
// c获取随机颜色值
function getRandColor(min, max) {
var R = randNum(min, max);
var G = randNum(min, max);
var B = randNum(min, max);
return 'rgb(' + R + ',' + G + ',' + B + ')';
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
js,canvas,验证码
杰网资源 Design By www.escxy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
杰网资源 Design By www.escxy.com
暂无评论...
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。