canvas基礎(chǔ)之圖形驗(yàn)證碼的示例
發(fā)布時(shí)間:2018-01-02 14:38:51 作者:shizhuanzhi
我要評(píng)論

這篇文章主要介紹了canvas基礎(chǔ)之圖形驗(yàn)證碼的示例的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
在通常的登錄界面我們都可以看到驗(yàn)證碼,驗(yàn)證碼的作用是檢測(cè)是不是人在操作,防止機(jī)器等非人操作,防止數(shù)據(jù)庫(kù)被輕而易舉的攻破。
驗(yàn)證碼一般用PHP和java等后端語(yǔ)言編寫(xiě);
但是在前端,用canva或者SVG也可以繪制驗(yàn)證碼;
直接上干貨:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> canvas { border: 1px solid red; } </style> </head> <body> <canvas id="myCanvas" width="100" height="40"> 您的瀏覽器不支持canvas </canvas> </body> <script type="text/javascript"> var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); //隨機(jī)字符(透明度)(大小隨機(jī),位置隨機(jī)); var strStore = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; //隨機(jī)函數(shù) function roundNum(min, max) { return parseInt(Math.random() * (max - min) + min); } //文字內(nèi)容部分: var str = ""; for(var i = 0; i < 5; i++) { context.beginPath(); //隨機(jī)顏色(淺色:RGB - 200~250) var color = `rgb(${roundNum(0,255)},${roundNum(0,255)},${roundNum(0,255)})`; context.fillStyle = color; context.font = roundNum(20,30)+"px Arial"; context.textAlign = "center"; str = strStore[roundNum(0,strStore.length)]; context.fillText(str, 10 + 18 * i, roundNum(20,35)); } //10個(gè)左右的隨機(jī)(長(zhǎng)度隨機(jī),位置隨機(jī)),干擾線(xiàn) for(var j = 0; j < roundNum(5, 10); j++) { context.beginPath(); var color = `rgb(${roundNum(0,255)},${roundNum(0,255)},${roundNum(0,255)})`; context.strokeStyle = color; context.moveTo(roundNum(0, 100), roundNum(0, 40)); context.lineTo(roundNum(0, 100), roundNum(0, 40)); context.stroke(); } //干擾項(xiàng):10個(gè)左右的隨機(jī)(半徑隨機(jī),位置隨機(jī)),干擾圓 for(var j = 0; j < roundNum(5, 10); j++) { context.beginPath(); context.fillStyle = color; context.arc(roundNum(0, 100), roundNum(0, 40), roundNum(0, 5), Math.PI * 2 / (roundNum(1, 360)), Math.PI * 2 / (roundNum(1, 360))); context.fill(); } </script> </html>
結(jié)果如圖:
至于要拿來(lái)咋用,就看大家高興了。想怎么整這么整。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
用canvas顯示驗(yàn)證碼的實(shí)現(xiàn)
這篇文章主要介紹了用canvas顯示驗(yàn)證碼的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-10利用html5 canvas破解簡(jiǎn)單驗(yàn)證碼及getImageData接口應(yīng)用
:HTML 5中的canvas有個(gè)接口getImageData可以用來(lái)從驗(yàn)證碼圖像中取得像素?cái)?shù)據(jù)。每一個(gè)像素有對(duì)應(yīng)r,g,b,a四個(gè)值,r,g,b是紅綠藍(lán)三色,a是透明度;觀(guān)察了一下,接下來(lái)說(shuō)下思路2013-01-25canvas實(shí)現(xiàn)滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例
這篇文章主要介紹了canvas實(shí)現(xiàn)滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)2020-08-11