您好,登錄后才能下訂單哦!
本文實例為大家分享了使用canvas繪制隨機驗證碼的具體代碼,供大家參考,具體內(nèi)容如下
理論基礎(chǔ):
掌握使用canvas繪制線條和圓形以及繪制文字
實現(xiàn)思路:
先構(gòu)建一個畫布,設(shè)置一定的寬高(在canvas中設(shè)置寬高和在style中設(shè)置是有區(qū)別的,建議直接在canvas標簽中設(shè)置),封裝一個生成隨機數(shù)的方法,為線條和圓形的繪制設(shè)置隨機的位置,既然是隨機的,必然是有隨機的區(qū)間,先獲取畫布的寬高,線條和圓的位置就是(0~畫布的寬高區(qū)間)的隨機位置,再定義一個隨機字符,獲取隨機的索引值,即可生成隨機的驗證碼。需要刷新,直接把以下代碼封裝在函數(shù)里,用一個事件觸發(fā)即可。
源代碼:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>canvas驗證碼</title> </head> <body> <canvas id="code" width="80" height="30" ></canvas> <script src="jq/jquery-3.2.1.min.js"></script> <script> var canvasW=$("#code").width(); var canvasH=$("#code").height(); //獲取任意區(qū)間隨機數(shù) var getRandom=function (maxNum) { return Math.floor(Math.random()*maxNum); } //隨機顏色 var getColor=function () { var r=getRandom(256), g=getRandom(256), b=getRandom(256); return "rgb("+[r,g,b].join(',')+")"; } var ctx=$("#code")[0].getContext("2d"); var lineNum=3,arcNum=20; //繪制線 for (var i=0;i<lineNum;i++){ ctx.beginPath(); ctx.moveTo(getRandom(canvasW),getRandom(canvasH)); ctx.lineTo(getRandom(canvasW),getRandom(canvasH)); ctx.strokeStyle=getColor(); ctx.closePath(); ctx.stroke(); } //繪制點 for (var i=0;i<arcNum;i++){ ctx.beginPath(); ctx.arc(getRandom(canvasW),getRandom(canvasH),1,0,2*Math.PI); ctx.fillStyle=getColor(); ctx.closePath(); ctx.fill(); } //繪制驗證碼 var codeTxt="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";; for(var i=0;i<4;i++){ var txt=codeTxt.split("")[getRandom(codeTxt.length)]; //繪制驗證碼 ctx.beginPath(); ctx.font="23px 微軟雅黑"; ctx.fillStyle=getColor(); ctx.fillText(txt,20*i,25); ctx.closePath(); } </script> </body> </html>
最終效果:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。