canvas+js随机生成验证码

最新推荐文章于 2024-01-07 12:55:23 发布

宁静海

最新推荐文章于 2024-01-07 12:55:23 发布

阅读量501

点赞数

文章标签：随机生成验证码随机数 html5 js canvas

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="apple-mobile-web-app-capable" content="yes"> 
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="full-screen" content="yes">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<title>Document</title>
</head>
<body>
	<canvas id="mycanvas" width="120" height="30"></canvas>
	<script type="text/javascript">
		var can = document.getElementById("mycanvas");
		var ctx = can.getContext("2d");
		ctx.fillStyle = randColor(170,250); 
		ctx.fillRect(0,0,120,30);
		draw();

		can.οnclick=function() {
			ctx.clearRect(0,0,120,30);
			draw();
		}
		function draw(){
			ctx.fillStyle=randColor(170,250); 
			ctx.fillRect(0,0,120,30);
			var data = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890';
			for(var i=0;i<=90;i+=30){
				var c = data[randNun(0,data.length-1)];
				ctx.fillStyle = randColor(60,160);
				ctx.font = randNun(15,40)+'px SimHei';
				ctx.fillText(c,i+randNun(0,15),randNun(15,30))
			}
			//	绘制干扰线
			for(var i=0;i<10;i++){
				ctx.beginPath();
				ctx.moveTo(randNun(0,120),randNun(0,120))
				ctx.lineTo(randNun(0,120),randNun(0,120))
				ctx.strokeStyle=randColor(60,160)
				ctx.stroke();
			}
			// 绘制干扰点
			for(var i=0;i<10;i++){
				ctx.beginPath();
				ctx.arc(randNun(0,120),randNun(0,30),randNun(1,4),0,2*Math.PI)
				ctx.strokeStyle=randColor(60,160);
				ctx.stroke();
			}
		}

		function randColor(min,max){
			var r=Math.floor(Math.random()*(max-min+1)+min); //[0,max-min)+min==>>[min,max)
			var g=Math.floor(Math.random()*(max-min+1)+min);
			var b=Math.floor(Math.random()*(max-min+1)+min);
			return 'rgb('+r+','+g+','+b+')';
		}
		function randNun(min,max){
			var num = Math.floor(Math.random()*(max-min+1)+min)
			return num
		}
	</script>
</body>
</html>