js生成验证码

浏览数：54 / 时间：2015年06月09日

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1.0" />
<title>canvas</title>
<script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js" ></script>
</head>
<body>

	<canvas class="canvas"></canvas>
	<br/>
	<span id="test" data-rel="true"></span>
</body>
</html>

javascript

<script type="text/javascript"> 
	//随机生成数
	function getRandomStr(len)
	{
		    var text = "";
		    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
		    for( var i=0; i < len; i++ )
		        text += possible.charAt(Math.floor(Math.random() * possible.length));
		    return text;
	}
	
	//瓜瓜图层
	(function(bodyStyle) {
		
		bodyStyle.mozUserSelect = ‘none‘;
		bodyStyle.webkitUserSelect = ‘none‘;
		var $canvas = $(".canvas");
		var moveTime, canvasTop = $canvas.offset().top;
		$canvas.attr("data-flag", "true");
		var u = navigator.userAgent, mobile = ‘‘;
		if (u.indexOf(‘Windows‘) > -1)
			mobile = ‘PC‘;
		if (u.indexOf(‘iPhone‘) > -1)
			mobile = ‘iphone‘;
		if (u.indexOf(‘534‘) > -1 && u.indexOf(‘Linux‘) > -1)
			mobile = ‘Android_pa‘;
		
		var img = new Image();
		var canvas = document.querySelector(‘canvas‘);
		canvas.style.backgroundColor = ‘transparent‘;

		if (mobile != "iphone" && mobile != "PC" && mobile == "Android_pa") {
			canvas.style.position = ‘absolute‘;
		}
		
		img.addEventListener(‘load‘, function(e) {
			var ctx;
			var w = 270, h = 140;
			var mousedown = false;
			
			//渲染画布
			function layer(ctx) {
				
				//灰色区域
				ctx.fillStyle = ‘#ccc‘;
				ctx.fillRect(0, 0, w, h);
				
				//区域上的字
				ctx.font = "Bold 50px Arial red"; 
				ctx.textAlign = "left";
				ctx.fillStyle = "#aaa"; 
				ctx.fillText("刮奖区", 50, 80); 
				
			}
			function eventDown(e) {
				e.preventDefault();
				if (mobile != "iphone" && mobile != "PC"
						&& mobile == "Android_pa") {
					clearInterval(moveTime);
					moveTime = setInterval(function() {
						if ($canvas.attr("data-flag") == "true") {
							canvasTop--;
							$canvas.attr("data-flag", "false");
						} else {
							canvasTop++;
							$canvas.attr("data-flag", "true");
						}
						$canvas.css("top", canvasTop);
					}, 10);
				}
				mousedown = true;
			}
			function eventUp(e)
			{
				e.preventDefault();
				clearInterval(moveTime);
				mousedown = false;
				var data = ctx.getImageData(0, 0, w, h).data;
				for (var i = 0, j = 0; i < data.length; i += 4) {
					if (data[i] && data[i + 1] && data[i + 2] && data[i + 3]) {
						j++;
					}
				}
				if ((j <= w * h * 0.5) && $("#test").attr("data-rel"))
				{
					//剩余10%面积提示信息
					$("#test").html("恭喜您，中奖啦！");
					$("#test").attr("data-rel", "false");
				}
			}
			function eventMove(e) {
				e.preventDefault();
				if (mousedown) {
					if (e.changedTouches) {
						e = e.changedTouches[e.changedTouches.length - 1];
					}
					var x = e.pageX - this.offsetLeft;
					var y = e.pageY - this.offsetTop;
			
					with (ctx) 
					 {
						beginPath();
						arc(x, y, 30, 0, Math.PI * 2,true);//设置涂抹大小
						fill(); 
					}
					
				}
			}
			canvas.width = w;
			canvas.height = h;
			ctx = canvas.getContext(‘2d‘);
		 	/*ctx.fillStyle = ‘yellow‘;
			ctx.fillRect(0, 0, w, h);  */

		   //绘制新图层，并设置为背景    s
		   ctx.save();
	       var fontSize = 36;
	       ctx.font = ‘ Bold ‘ + fontSize + ‘px Consolas‘;
	       ctxtextAlign = ‘center‘;
	       ctx.fillStyle = ‘#60f‘;
	       ctx.fillText(getRandomStr(10), this.width /8, this.height/2  + fontSize / 2);
	       ctx.restore();
	       //绘制新图层，并设置为背景   e
	       
	        var data = canvas.toDataURL("image/png");
			canvas.style.backgroundImage = ‘url(‘ + data + ‘)‘;
			ctx.clearRect(0,0,this.width,this.height);//清除重影
			
			layer(ctx);//执行函数
			
			ctx.globalCompositeOperation = ‘destination-out‘;
			canvas.addEventListener(‘touchstart‘, eventDown);
			canvas.addEventListener(‘touchend‘, eventUp);
			canvas.addEventListener(‘touchmove‘, eventMove);
			canvas.addEventListener(‘mousedown‘, eventDown);
			canvas.addEventListener(‘mouseup‘, eventUp);
			canvas.addEventListener(‘mousemove‘, eventMove);
		});
		
		// 展示的图片
		img.src="canvas-bg.png";
	})(document.body.style);
</script>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js生成验证码