站長(zhǎng)資訊網(wǎng)
思路介紹：
可以利用html5的canvas標(biāo)簽先生成畫(huà)布，然后在畫(huà)布上利用隨機(jī)數(shù)字生成驗(yàn)證碼，背景用隨機(jī)顏色和雜亂的直線來(lái)代替。
（學(xué)習(xí)視頻分享：html5視頻教程）
高級(jí)方法：
利用表單插件屬性綁定驗(yàn)證碼數(shù)據(jù)(json)可以在發(fā)送時(shí)候或者異步通信進(jìn)行后臺(tái)數(shù)據(jù)獲取與檢查。
具體代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>驗(yàn)證碼</title> <style type="text/css"> #canvas{ cursor:pointer; } </style> </head> <body> <canvas id="canvas" width="150px" height="50px"></canvas> <script> //生成隨機(jī)數(shù) function randomNum(min,max){ return Math.floor(Math.random()*(max-min)+min); } //生成隨機(jī)顏色RGB分量 function randomColor(min,max){ var _r = randomNum(min,max); var _g = randomNum(min,max); var _b = randomNum(min,max); return "rgb("+_r+","+_g+","+_b+")"; } //先阻止畫(huà)布默認(rèn)點(diǎn)擊發(fā)生的行為再執(zhí)行drawPic()方法 document.getElementById("canvas").onclick = function(e){ e.preventDefault(); drawPic(); }; function drawPic(){ //獲取到元素canvas var $canvas = document.getElementById("canvas"); var _str = "0123456789";//設(shè)置隨機(jī)數(shù)庫(kù) var _picTxt = "";//隨機(jī)數(shù) var _num = 4;//4個(gè)隨機(jī)數(shù)字 var _width = $canvas.width; var _height = $canvas.height; var ctx = $canvas.getContext("2d");//獲取 context 對(duì)象 ctx.textBaseline = "bottom";//文字上下對(duì)齊方式--底部對(duì)齊 ctx.fillStyle = randomColor(180,240);//填充畫(huà)布顏色 ctx.fillRect(0,0,_width,_height);//填充矩形--畫(huà)畫(huà) 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;//獲取一個(gè)隨機(jī)數(shù) ctx.fillStyle = randomColor(10,100);//填充隨機(jī)顏色 ctx.font = randomNum(16,40)+"px SimHei";//設(shè)置隨機(jī)數(shù)大小，字體為SimHei ctx.translate(x,y);//將當(dāng)前xy坐標(biāo)作為原始坐標(biāo) ctx.rotate(deg*Math.PI/180);//旋轉(zhuǎn)隨機(jī)角度 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(); //隨機(jī)劃線--4條路徑 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(); //隨機(jī)畫(huà)原，填充顏色 ctx.arc(randomNum(0,_width),randomNum(0,_height), 1, 0, 2*Math.PI); ctx.fill(); } return _picTxt;//返回隨機(jī)數(shù)字符串 } drawPic(); </script> </body> </html>
登錄后復(fù)制
相關(guān)推薦：html5教程
