首页 > 代码库 > js生成验证码
js生成验证码
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="http://www.mamicode.com/canvas-bg.png"; })(document.body.style); </script>
js生成验证码
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。