在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
本文实例为大家分享了jquery canvas绘制图片验证码的具体代码,供大家参考,具体内容如下 CSS .identify-code{ position: absolute; right: 6px; top: 50%; width: 118px; height: 40px; margin: -21px 0 0 0; } HTML <span id="code" class="identify-code"> <canvas class="show-captcha" id="canvas" style="width: 100%; height: 100%;"></canvas> </span> JS /**绘制验证码图片**/ function drawPic() { var canvas = document.getElementById("canvas"); var width = canvas.width; var height = canvas.height; //获取该canvas的2D绘图环境 var ctx = canvas.getContext('2d'); ctx.textBaseline ='bottom'; /**绘制背景色**/ ctx.fillStyle = randomColor(180, 240); //颜色若太深可能导致看不清 ctx.fillRect(0,0,width,height); /**绘制文字**/ var str ='ABCEFGHJKLMNPQRSTWXY123456789abcefghjklmnpqrstwxy'; var code=""; //生成四个验证码 for(var i = 1;i <= 4; i++) { var txt = str[randomNum(0,str.length)]; code=code+txt; ctx.fillStyle = randomColor(50,160); //随机生成字体颜色 ctx.font = randomNum(90,110) +'px SimHei'; //随机生成字体大小 var x = 10 + i * 50; var y = randomNum(100, 135); var deg = randomNum(-30, 30); //修改坐标原点和旋转角度 ctx.translate(x, y); ctx.rotate(deg * Math.PI /180); ctx.fillText(txt,0,0); //恢复坐标原点和旋转角度 ctx.rotate(-deg * Math.PI /180); ctx.translate(-x, -y); } /**绘制干扰线**/ for(var i=0;i<3;i++) { ctx.strokeStyle = randomColor(40, 180); ctx.beginPath(); ctx.moveTo(randomNum(0,width/2), randomNum(0,height/2)); ctx.lineTo(randomNum(0,width/2), randomNum(0,height)); ctx.stroke(); } /**绘制干扰点**/ for(var i=0;i <50;i++) { ctx.fillStyle = randomColor(255); ctx.beginPath(); ctx.arc(randomNum(0, width), randomNum(0, height),1,0,2* Math.PI); ctx.fill(); } return code; } /**生成一个随机数**/ function randomNum(min, max) { return Math.floor(Math.random() * (max - min) + min); } /**生成一个随机色**/ function randomColor(min, max) { var r = randomNum(min, max); var g = randomNum(min, max); var b= randomNum(min, max); return "rgb(" + r + "," + g + "," + b + ")"; } 调用实例 $("#code").unbind('click').click(function(e){ e.preventDefault(); createCode(); }); //生成验证码 function createCode(){ VerificationCodeErrCount = 0; randomCode = drawPic(); return randomCode; } 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。 |
请发表评论