Html5生成驗證碼的示例代碼
發(fā)布時間：2021-05-10 16:40:26 作者：qq_24528945 
我要評論
我要評論這篇文章主要介紹了Html5生成驗證碼的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
利用Html5的canvas標簽生成畫布,在畫布上利用隨機生成的數(shù)字畫上驗證碼，背景為隨機生成的顏色和雜亂的直線與點點。
進階：利用表單插件屬性綁定驗證碼數(shù)據(jù)(json)可以在發(fā)送時候或者異步通信進行后臺數(shù)據(jù)獲取與檢查。
代碼塊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>驗證碼</title>
<style type="text/css">
#canvas{
cursor:pointer;
}
</style>
</head>
<body>
<canvas id="canvas" width="150px" height="50px"></canvas>
<script>
//生成隨機數(shù)
function randomNum(min,max){
return Math.floor(Math.random()*(max-min)+min);
}
//生成隨機顏色RGB分量
function randomColor(min,max){
var _r = randomNum(min,max);
var _g = randomNum(min,max);
var _b = randomNum(min,max);
return "rgb("+_r+","+_g+","+_b+")";
}
//先阻止畫布默認點擊發(fā)生的行為再執(zhí)行drawPic()方法
document.getElementById("canvas").onclick = function(e){
e.preventDefault();
drawPic();
};
function drawPic(){
//獲取到元素canvas
var $canvas = document.getElementById("canvas");
var _str = "0123456789";//設(shè)置隨機數(shù)庫
var _picTxt = "";//隨機數(shù)
var _num = 4;//4個隨機數(shù)字
var _width = $canvas.width;
var _height = $canvas.height;
var ctx = $canvas.getContext("2d");//獲取 context 對象
ctx.textBaseline = "bottom";//文字上下對齊方式--底部對齊
ctx.fillStyle = randomColor(180,240);//填充畫布顏色
ctx.fillRect(0,0,_width,_height);//填充矩形--畫畫
for(var i=0; i<_num; i++){
var x = (_width-10)/_num*i+10;
var y = randomNum(_height/2,_height);
var deg = randomNum(-45,45);
var txt = _str[randomNum(0,_str.length)];
_picTxt += txt;//獲取一個隨機數(shù)
ctx.fillStyle = randomColor(10,100);//填充隨機顏色
ctx.font = randomNum(16,40)+"px SimHei";//設(shè)置隨機數(shù)大小，字體為SimHei
ctx.translate(x,y);//將當前xy坐標作為原始坐標
ctx.rotate(deg*Math.PI/180);//旋轉(zhuǎn)隨機角度
ctx.fillText(txt, 0,0);//繪制填色的文本
ctx.rotate(-deg*Math.PI/180);
ctx.translate(-x,-y);
}
for(var i=0; i<_num; i++){
//定義筆觸顏色
ctx.strokeStyle = randomColor(90,180);
ctx.beginPath();
//隨機劃線--4條路徑
ctx.moveTo(randomNum(0,_width), randomNum(0,_height));
ctx.lineTo(randomNum(0,_width), randomNum(0,_height));
ctx.stroke();
}
for(var i=0; i<_num*10; i++){
ctx.fillStyle = randomColor(0,255);
ctx.beginPath();
//隨機畫原，填充顏色
ctx.arc(randomNum(0,_width),randomNum(0,_height), 1, 0, 2*Math.PI);
ctx.fill();
}
return _picTxt;//返回隨機數(shù)字符串
}
drawPic();
</script>
</body>
</html>
到此這篇關(guān)于Html5生成驗證碼的示例代碼的文章就介紹到這了,更多相關(guān)Html5生成驗證碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
利用html5 canvas破解簡單驗證碼及getImageData接口應(yīng)用
：HTML 5中的canvas有個接口getImageData可以用來從驗證碼圖像中取得像素數(shù)據(jù)。每一個像素有對應(yīng)r,g,b,a四個值，r,g,b是紅綠藍三色，a是透明度;觀察了一下，接下來說下思路2013-01-25