前端生成随机码

最新推荐文章于 2023-03-04 17:15:06 发布

ke_yi_

最新推荐文章于 2023-03-04 17:15:06 发布

阅读量1k

点赞数

分类专栏： --------JavaScript

本文链接：https://blog.csdn.net/ke_yi_/article/details/96115940

版权

--------JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

生成随机码步骤

1.获取画板对象

html代码定义canvas标签
<canvas id="myCanvas" width="80px" height="30px"></canvas>
js代码获取cavas标签对象
var c = document.getElementById("myCanvas");

2.设置画板属性

var ctx = c.getContext("2d");

3.随机码背景

设置背景颜色
ctx.fillStyle = "aqua";//设置颜色
设置背景填充区域
ctx.fillRect(0, 0, 80, 30);//设置填充区域

4.设置随机码

生成随机码

function getRandomCode(){
				var code="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
				var str="";
				str+=code[parseInt(Math.floor(Math.random()*36))];
				str+=code[parseInt(Math.floor(Math.random()*36))];
				str+=code[parseInt(Math.floor(Math.random()*36))];
				str+=code[parseInt(Math.floor(Math.random()*36))];
				return str;
			}

设置随机码字体
ctx.font = "bolder 25px 华文隶书";//设置字体样式
设置随机码颜色

ctx.fillStyle = "coral";//设置字体颜色

设hi随机码显示区域和内容

ctx.fillText(getRandomCode(), 10, 25);//设置字体(实心)内容和显示区域,参照点是左下角
//ctx.strokeText("hellow", 10, 20);//空心字体

5.设置模糊线

设置模糊线颜色

ctx.strokeStyle="black";//"aqua";//设置路径颜色
开始定义模糊线

ctx.beginPath();//开始路径
定义模糊线宽度

ctx.lineWidth="1";//路径宽度
定义模糊线开始位置

ctx.moveTo(Math.floor(Math.random()*70)+5, 0);//路径起始位置
定义模糊线结束位置

ctx.lineTo(Math.floor(Math.random()*60)+5, 25);//路径结束位置
绘制模糊线

ctx.stroke();//绘制已经定义的路径

6.设置模糊点

模糊点初始化

ctx.strokeStyle="white";//设置路径颜色
ctx.beginPath();//开始路径
ctx.lineWidth="1";//路径宽度

随机生成100个模糊点

for(var i=0;i<100;i++){
	var bex=Math.floor(Math.random()*78);
	var bey=Math.floor(Math.random()*28);
	var tex=parseFloat((Math.random()*2).toFixed(2));
	var tey=parseFloat((Math.random()*2).toFixed(2));
	var enx=bex+tex;
	var eny=bey+tey;
	ctx.moveTo(bex,bey);
	ctx.lineTo(enx,eny)
}

绘制模糊点

ctx.stroke();//绘制已经定义的路径

效果展示

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			数字验证码
			<hr />
			<canvas id="myCanvas" width="80px" height="30px"></canvas>
			<button onclick="createCode()">换一张</button>
		</div>
		<script>
			var code="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
			onload=createCode();
			function getRandomCode(){
				var str="";
				str+=code[parseInt(Math.floor(Math.random()*36))];
				str+=code[parseInt(Math.floor(Math.random()*36))];
				str+=code[parseInt(Math.floor(Math.random()*36))];
				str+=code[parseInt(Math.floor(Math.random()*36))];
				return str;
			}
			function createCode(){
				var c = document.getElementById("myCanvas");
				var ctx = c.getContext("2d");
				
				//设置一块区域颜色作为背景
				ctx.fillStyle = "aqua";//设置颜色
				ctx.fillRect(0, 0, 80, 30);//设置填充区域
				
				//设置要显示的字体
				ctx.font = "bolder 25px 华文隶书";//设置字体样式
				ctx.fillStyle = "coral";//设置字体颜色
				ctx.fillText(getRandomCode(), 10, 25);//设置字体(实心)内容和显示区域,参照点是左下角
				//ctx.strokeText("hellow", 10, 20);//空心字体
				
				//生成模糊线
				ctx.strokeStyle="black";//"aqua";//设置路径颜色
				ctx.beginPath();//开始路径
				ctx.lineWidth="1";//路径宽度
				//路径一
				ctx.moveTo(Math.floor(Math.random()*70)+5, 0);//路径起始位置
				ctx.lineTo(Math.floor(Math.random()*60)+5, 25);//路径结束位置
				//路径二
				ctx.moveTo(Math.floor(Math.random()*70)+5, 10);//另一条路径起始位置
				ctx.lineTo(Math.floor(Math.random()*70)+5, 28);//另一条路径结束位置
				ctx.stroke();//绘制已经定义的路径
				
				//生成模糊点
				ctx.strokeStyle="white";//设置路径颜色
				ctx.beginPath();//开始路径
				ctx.lineWidth="1";//路径宽度
				for(var i=0;i<100;i++){
					var bex=Math.floor(Math.random()*78);
					var bey=Math.floor(Math.random()*28);
					var tex=parseFloat((Math.random()*2).toFixed(2));
					var tey=parseFloat((Math.random()*2).toFixed(2));
					var enx=bex+tex;
					var eny=bey+tey;
					ctx.moveTo(bex,bey);
					ctx.lineTo(enx,eny)
				}
				ctx.stroke();//绘制已经定义的路径
			}
		</script>
	</body>
</html>

ke_yi_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端生成随机码

生成随机码步骤1.获取画板对象html代码定义canvas标签<canvas id="myCanvas" width="80px" height="30px"></canvas>js代码获取cavas标签对象var c = document.getElementById("myCanvas");2.设置画板属性 var ctx = c.getContex...
复制链接

扫一扫