前端开发验证码怎么做？Canvas版验证码生成

by 前端开发者 · Published 2018年5月12日20:50:23 · Updated 2018年5月12日21:00:19

摘要：前端开发验证码直接上码html 代码 <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>Documen……

前端开发验证码

直接上码html 代码

<!DOCTYPE <a href="https://www.rokub.com/category/html" title="html">html</a>> <<a href="https://www.rokub.com/category/html" title="html">html</a>> <head> <meta charset=”UTF-8″> <title>Document</title> </head> <body> <canvas id=”canvas” width=”150″ height=”50″></canvas> <script> 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+”)”; } document.getElementById(“canvas”).onclick = function(e){ e.preventDefault(); drawPic(); }; function drawPic(){ var $canvas = document.getElementById(“canvas”); var _str = “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789”; var _picTxt = “”; var _num = 6; var _width = $canvas.width; var _height = $canvas.height; var ctx = $canvas.getContext(“2d”); ctx.textBaseline = “bottom”; ctx.fillStyle = randomColor(180,240); ctx.fillRect(0,0,_width,_height); for(var i=0; i<_num; i++){ var x = (_width-10)/_num*i+10; var y = randomNum(_height/2,_height); var deg = randomNum(-45,45); var txt = _str[randomNum(0,_str.length)]; _picTxt += txt; ctx.fillStyle = randomColor(10,100); ctx.font = randomNum(16,40)+”px SimHei”; 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<_num; i++){ ctx.strokeStyle = randomColor(90,180); ctx.beginPath(); ctx.moveTo(randomNum(0,_width), randomNum(0,_height)); ctx.lineTo(randomNum(0,_width), randomNum(0,_height)); ctx.stroke(); } for(var i=0; i<_num*10; i++){ ctx.fillStyle = randomColor(0,255); ctx.beginPath(); ctx.arc(randomNum(0,_width),randomNum(0,_height), 1, 0, 2*Math.PI); ctx.fill(); } return _picTxt; } drawPic(); </script> </body> </<a href="https://www.rokub.com/category/html" title="html">html</a>>

网站前端开发_前端开发者

https://www.rokub.com

前端开发验证码怎么做？Canvas版验证码生成

You may also like...

发表评论取消回复

近期文章

近期评论

分类目录

精选

联系方式

前端开发验证码怎么做？Canvas版验证码生成

You may also like...

DOM中Attribute与Property的区别丨前端开发者

教你学会CSS3 3D 技术|网站前端开发_前端开发者

浮动特性以及部分清浮动方法|网站前端开发_前端开发者

发表评论 取消回复

近期文章

近期评论

分类目录

精选

联系方式

发表评论取消回复