利用html5的canvas標簽生成畫布,在畫布上利用隨機生成的數字畫上驗證碼，背景為隨機生成的顏色和雜亂的直線與點點。

進階：利用表單插件屬性綁定驗證碼數據(json)可以在發送時候或者異步通信進行后臺數據獲取與檢查。

代碼塊

驗證碼

#canvas{

cursor:pointer;

}

//生成隨機數

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+")";

}

//先阻止畫布默認點擊發生的行為再執行drawpic()方法

document.getelementbyid("canvas").onclick = function(e){

e.preventdefault();

drawpic();

};

function drawpic(){

//獲取到元素canvas

var $canvas = document.getelementbyid("canvas");

var _str = "0123456789";//設置隨機數庫

var _pictxt = "";//隨機數

var _num = 4;//4個隨機數字

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;//獲取一個隨機數

ctx.fillstyle = randomcolor(10,100);//填充隨機顏色

ctx.font = randomnum(16,40)+"px simhei";//設置隨機數大小，字體為simhei

ctx.translate(x,y);//將當前xy坐標作為原始坐標

ctx.rotate(deg*math.pi/180);//旋轉隨機角度

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 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;//返回隨機數字符串

}

drawpic();

到此這篇關于html5生成驗證碼的示例代碼的文章就介紹到這了,更多相關html5生成驗證碼內容請搜索萬仟網以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持萬仟網！

總結

以上是生活随笔為你收集整理的html5验证码制作,Html5生成验证码的示例代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。