验证码 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#canvas{
				background: #313847;
				margin: 0 auto;
				display: block;
				margin-top: 200px;
			}
			
		</style>
	</head>
	<body>
		
		<canvas id="canvas" width="200" height="50"></canvas>
	</body>
	<script>
		var canvas=document.getElementById('canvas');
		var cv=canvas.getContext('2d');
		
		cv.font='30px arial';
		var words='QWERRTYUIOPASDFGHJKLZXCVBNM';
		for(var i=0;i<4;i++){
			var num=Math.floor(Math.random()*(words.length-1+1-0)+0);
			//随机位置
			var l=Math.floor(Math.random()*((i*50+20)+1-i*50)+i*50);
			var t=Math.floor(Math.random()*(45+1-30)+30);
			var r=Math.floor(Math.random()*256);
			var g=Math.floor(Math.random()*256);
			var b=Math.floor(Math.random()*256);
			cv.fillStyle='rgb('+r+','+g+','+b+')';
			//随机角度
			var d=Math.floor(Math.random()*(5+1+5)-5);
			cv.rotate(d*Math.PI/180);
			cv.fillText(words[num],l,t);
			
			
		}
		for(var i=0;i<10;i++){
			var startx=Math.floor(Math.random()*201);
			var starty=Math.floor(Math.random()*51);
			var endx=Math.floor(Math.random()*201);
			var endy=Math.floor(Math.random()*51);
			cv.beginPath();
			cv.moveTo(startx,starty);
			cv.lineTo(endx,endy);
			cv.closePath();
			var r=Math.floor(Math.random()*256);
			var g=Math.floor(Math.random()*256);
			var b=Math.floor(Math.random()*256);
			var o=Math.floor(Math.random()*101);
			cv.strokeStyle='rgba('+r+','+g+','+b+','+o/100+')';
			cv.stroke();
		}
			
		
		
	</script>
</html>

 

 

posted @ 2018-08-20 17:56  webxy  阅读(199)  评论(0)    收藏  举报