jquery使用canvas標(biāo)簽繪制驗(yàn)證碼
<canvas> 元素是為了客戶(hù)端矢量圖形而設(shè)計(jì)的。它自己沒(méi)有行為,但卻把一個(gè)繪圖 API 展現(xiàn)給客戶(hù)端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫(huà)布上。
代碼如下
css:
input{ width: 200px; height: 32px; border: 1px solid #000; box-sizing: border-box ; } #c1{ vertical-align: middle; box-sizing: border-box; cursor: pointer; } #btn{ display: block; margin-top: 10px; height: 32px; font-size: 16px; }
html:
<div class="code"> <input type="text" value="" id="inputValue" placeholder="請(qǐng)輸入驗(yàn)證碼(不區(qū)分大小寫(xiě))"> <canvas id="c1" width="100" height="30"style='border:1px solid black'></canvas> <button id="btn">提交</button> </div>
JavaScript:
$(function(){ //存放隨機(jī)的驗(yàn)證碼 var showNum=[] draw(showNum) $('#c1').on('click',function(){ draw(showNum) }) $('#btn').on('click',function(){ var s = $('#inputValue').val().toLowerCase() var s1 = showNum.join("") if(s==s1){ alert('提交成功') }else{ alert('驗(yàn)證碼錯(cuò)誤') draw(showNum) } }) //封裝一個(gè)隨機(jī)驗(yàn)證碼繪制畫(huà)布的函數(shù) function draw(showNum){ //獲取canvas var canvas= $('#c1') var ctx=canvas[0].getContext('2d') //獲取畫(huà)布的寬度和高度 var canvas_width=canvas.width() var canvas_height=canvas.height() //清空之前繪制的內(nèi)容 //0,0 清空的起始坐標(biāo) //矩形的寬度和高度 ctx.clearRect(0,0,canvas_width,canvas_height) //開(kāi)始繪制 var scode='a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,0,1,2,3,4,5,6,7,8,9' console.log("123"); var arrCode=scode.split(',') console.log(arrCode); var arrLength =arrCode.length for(var i=0;i<4;i++){ var index=Math.floor(Math.random()*arrCode.length) //隨機(jī)一個(gè)字符 var txt = arrCode[index] showNum[i]=txt.toLowerCase() //開(kāi)始控制字符的繪制位置 var x=10+20*i//每一個(gè)驗(yàn)證碼繪制的起始點(diǎn)的x坐標(biāo) var y=20+Math.random()*8//起始點(diǎn)y坐標(biāo) ctx.font='bold 20px 微軟雅黑' //開(kāi)始旋轉(zhuǎn)字符 var deg = Math.random()-0.5 //canvas想實(shí)現(xiàn)繪制內(nèi)容具有傾斜效果,必須先平移 //為了把旋轉(zhuǎn)點(diǎn)移動(dòng)到繪制內(nèi)容的地方 ctx.translate(x,y) ctx.rotate(deg) //設(shè)置繪制的顏色隨機(jī)的顏色 ctx.fillStyle=randomColor() ctx.fillText(txt,0,0) //把canvas復(fù)原 ctx.rotate(-deg) ctx.translate(-x,-y) // ctx.stroke() } for(var i=0;i<=30;i++){ if(i<5){ //繪制線(xiàn) ctx.strokeStyle=randomColor() ctx.beginPath() ctx.moveTo(Math.random()*canvas_width,Math.random()*canvas_height) ctx.lineTo(Math.random()*canvas_width,Math.random()*canvas_height) ctx.stroke() } //繪制點(diǎn) ctx.strokeStyle=randomColor() ctx.beginPath() x=Math.random()*canvas_width y=Math.random()*canvas_height ctx.moveTo(x,y) ctx.lineTo(x+1,y+1) ctx.stroke() } } function randomColor(){ var r=Math.floor(Math.random()*256) var g=Math.floor(Math.random()*256) var b=Math.floor(Math.random()*256) return`rgb(${r},${g},$)` } })
能夠?qū)崿F(xiàn)這個(gè)效果
如果單擊canvas標(biāo)簽會(huì)更換一張圖片
輸入之后如果正確會(huì)彈出"輸入正確"的提示框
錯(cuò)誤會(huì)提示"輸入錯(cuò)誤"并且點(diǎn)擊確定后會(huì)更換一張驗(yàn)證碼框
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JQuery實(shí)現(xiàn)簡(jiǎ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è)簡(jiǎn)單的驗(yàn)證碼功能
- jquery實(shí)現(xiàn)表單獲取短信驗(yàn)證碼代碼
- jQuery實(shí)現(xiàn)的手機(jī)發(fā)送驗(yàn)證碼倒計(jì)時(shí)效果代碼分享
相關(guān)文章
jQuery實(shí)現(xiàn)動(dòng)態(tài)刪除LI的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)刪除LI的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05jQuery插件Validation快速完成表單驗(yàn)證的方式
這篇文章主要為大家詳細(xì)介紹了jQuery插件Validation快速完成表單驗(yàn)證的方式,感興趣的小伙伴們可以參考一下2016-07-07jQuery簡(jiǎn)單實(shí)現(xiàn)彩色云標(biāo)簽效果示例
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)彩色云標(biāo)簽效果,結(jié)合實(shí)例形式分析了jQuery隨機(jī)數(shù)運(yùn)算與頁(yè)面元素樣式動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-08-08ashx文件獲取$.ajax()方法發(fā)送的數(shù)據(jù)
這篇文章主要介紹了ashx文件獲取$.ajax()方法發(fā)送的數(shù)據(jù)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05Jquery設(shè)置attr的disabled屬性控制某行顯示或者隱藏
這篇文章主要與大家分享Jquery設(shè)置attr的disabled屬性控制某行顯示或者隱藏的具體實(shí)現(xiàn),喜歡的朋友可以參考下2014-09-09jquery使用on綁定a標(biāo)簽無(wú)效 只能用live解決
下面小編就為大家?guī)?lái)一篇jquery使用on綁定a標(biāo)簽無(wú)效 只能用live解決。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06基于jQuery實(shí)現(xiàn)的打字機(jī)效果
本文主要分享了基于jQuery實(shí)現(xiàn)的打字機(jī)效果的示例代碼。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01jQuery實(shí)現(xiàn)的網(wǎng)站banner圖片無(wú)縫輪播效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的網(wǎng)站banner圖片無(wú)縫輪播效果,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合時(shí)間函數(shù)實(shí)現(xiàn)圖片定時(shí)輪播切換相關(guān)操作技巧,需要的朋友可以參考下2019-01-01jquery Firefox3.5中操作select的問(wèn)題
不過(guò)最近安裝了FF3.5正式版,發(fā)現(xiàn)這種方法在它下面得不到值,就去看jquery的幫助文檔,在文檔中對(duì)select選中的引用是用如下方法2009-07-07