jquery canvas繪制圖片驗證碼實例
更新時間:2021年10月29日 08:55:08 作者:芲落
這篇文章主要為大家詳細介紹了jquery canvas繪制圖片驗證碼實例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery canvas繪制圖片驗證碼的具體代碼,供大家參考,具體內(nèi)容如下
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繪圖環(huán)境 var ctx = canvas.getContext('2d'); ctx.textBaseline ='bottom'; /**繪制背景色**/ ctx.fillStyle = randomColor(180, 240); //顏色若太深可能導(dǎo)致看不清 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); //修改坐標原點和旋轉(zhuǎn)角度 ctx.translate(x, y); ctx.rotate(deg * Math.PI /180); ctx.fillText(txt,0,0); //恢復(fù)坐標原點和旋轉(zhuǎn)角度 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; } /**生成一個隨機數(shù)**/ 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 + ")"; }
調(diào)用實例
$("#code").unbind('click').click(function(e){ e.preventDefault(); createCode(); }); //生成驗證碼 function createCode(){ VerificationCodeErrCount = 0; randomCode = drawPic(); return randomCode; }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jquery UI Datepicker時間控件的使用及問題解決
這篇文章主要介紹了jquery UI Datepicker時間控件的使用及與asp.net中的UpdatePanel聯(lián)合使用時的失效問題解決,感興趣的小伙伴們可以參考一下2016-04-04使用jQuery mobile NuGet讓你的網(wǎng)站在移動設(shè)備上同樣精彩
這篇文章主要介紹了使用jQuery mobile NuGet讓你的網(wǎng)站在移動設(shè)備上同樣精彩,使用jQuery mobile NuGet包,改變共享的布局和視圖,并使你的網(wǎng)站在傳統(tǒng)的瀏覽器和大部分手機展現(xiàn)的都很好。,需要的朋友可以參考下2019-06-06jquery 讀取頁面load get post ajax 四種方式代碼寫法
jquery 讀取頁面load get post ajax 四種方式代碼寫法,學(xué)習(xí)jquery的朋友可以參考下。2011-04-04jQuery Ajax 實現(xiàn)在html頁面實時顯示用戶登錄狀態(tài)
本文給大家分享jQuery Ajax 實現(xiàn)在html頁面實時顯示用戶登錄狀態(tài)的實現(xiàn)方法,非常不錯,具有參考借鑒價值,需要的朋友參考下2016-12-12jQuery實現(xiàn)簡單的下拉菜單導(dǎo)航功能示例
這篇文章主要介紹了jQuery實現(xiàn)簡單的下拉菜單導(dǎo)航功能,涉及jQuery針對頁面元素的遍歷與節(jié)點修改相關(guān)操作技巧,需要的朋友可以參考下2017-12-12