jquery canvas繪制圖片驗(yàn)證碼實(shí)例
本文實(shí)例為大家分享了jquery canvas繪制圖片驗(yàn)證碼的具體代碼,供大家參考,具體內(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
/**繪制驗(yàn)證碼圖片**/ 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=""; //生成四個(gè)驗(yàn)證碼 for(var i = 1;i <= 4; i++) { var txt = str[randomNum(0,str.length)]; code=code+txt; ctx.fillStyle = randomColor(50,160); //隨機(jī)生成字體顏色 ctx.font = randomNum(90,110) +'px SimHei'; //隨機(jī)生成字體大小 var x = 10 + i * 50; var y = randomNum(100, 135); var deg = randomNum(-30, 30); //修改坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度 ctx.translate(x, y); ctx.rotate(deg * Math.PI /180); ctx.fillText(txt,0,0); //恢復(fù)坐標(biāo)原點(diǎn)和旋轉(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(); } /**繪制干擾點(diǎn)**/ 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; } /**生成一個(gè)隨機(jī)數(shù)**/ function randomNum(min, max) { return Math.floor(Math.random() * (max - min) + min); } /**生成一個(gè)隨機(jī)色**/ 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)用實(shí)例
$("#code").unbind('click').click(function(e){ e.preventDefault(); createCode(); }); //生成驗(yàn)證碼 function createCode(){ VerificationCodeErrCount = 0; randomCode = drawPic(); return randomCode; }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JQuery實(shí)現(xiàn)簡單驗(yàn)證碼提示解決方案
- jquery實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼的倒計(jì)時(shí)代碼
- jQuery實(shí)現(xiàn)發(fā)送驗(yàn)證碼并60秒倒計(jì)時(shí)功能
- Jquery插件實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼后60秒內(nèi)禁止重新獲取
- jQuery插件實(shí)現(xiàn)靜態(tài)HTML驗(yàn)證碼校驗(yàn)
- jQuery 點(diǎn)擊獲取驗(yàn)證碼按鈕及倒計(jì)時(shí)功能
- jQuery實(shí)現(xiàn)驗(yàn)證碼功能
- jQuery實(shí)現(xiàn)一個(gè)簡單的驗(yàn)證碼功能
- jquery實(shí)現(xiàn)表單獲取短信驗(yàn)證碼代碼
- jQuery實(shí)現(xiàn)的手機(jī)發(fā)送驗(yàn)證碼倒計(jì)時(shí)效果代碼分享
相關(guān)文章
jquery UI Datepicker時(shí)間控件的使用及問題解決
這篇文章主要介紹了jquery UI Datepicker時(shí)間控件的使用及與asp.net中的UpdatePanel聯(lián)合使用時(shí)的失效問題解決,感興趣的小伙伴們可以參考一下2016-04-04JQuery 獲取和設(shè)置Select選項(xiàng)的代碼
JQuery獲取和設(shè)置Select選項(xiàng)2010-02-02使用jQuery mobile NuGet讓你的網(wǎng)站在移動設(shè)備上同樣精彩
這篇文章主要介紹了使用jQuery mobile NuGet讓你的網(wǎng)站在移動設(shè)備上同樣精彩,使用jQuery mobile NuGet包,改變共享的布局和視圖,并使你的網(wǎng)站在傳統(tǒng)的瀏覽器和大部分手機(jī)展現(xiàn)的都很好。,需要的朋友可以參考下2019-06-06jquery 讀取頁面load get post ajax 四種方式代碼寫法
jquery 讀取頁面load get post ajax 四種方式代碼寫法,學(xué)習(xí)jquery的朋友可以參考下。2011-04-04jQuery Ajax 實(shí)現(xiàn)在html頁面實(shí)時(shí)顯示用戶登錄狀態(tài)
本文給大家分享jQuery Ajax 實(shí)現(xiàn)在html頁面實(shí)時(shí)顯示用戶登錄狀態(tài)的實(shí)現(xiàn)方法,非常不錯,具有參考借鑒價(jià)值,需要的朋友參考下2016-12-12jQuery實(shí)現(xiàn)簡單的下拉菜單導(dǎo)航功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單的下拉菜單導(dǎo)航功能,涉及jQuery針對頁面元素的遍歷與節(jié)點(diǎn)修改相關(guān)操作技巧,需要的朋友可以參考下2017-12-12