JavaScript使用canvas繪制隨機(jī)驗(yàn)證碼

本文實(shí)例為大家分享了使用canvas繪制隨機(jī)驗(yàn)證碼的具體代碼，供大家參考，具體內(nèi)容如下

創(chuàng)新互聯(lián)是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來(lái)公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過(guò)去的十載時(shí)間我們累計(jì)服務(wù)了上千家以及全國(guó)政企客戶，如成都建筑動(dòng)畫等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過(guò)硬的技術(shù)實(shí)力獲得客戶的一致贊揚(yáng)。

理論基礎(chǔ)：

掌握使用canvas繪制線條和圓形以及繪制文字

實(shí)現(xiàn)思路：

先構(gòu)建一個(gè)畫布，設(shè)置一定的寬高（在canvas中設(shè)置寬高和在style中設(shè)置是有區(qū)別的，建議直接在canvas標(biāo)簽中設(shè)置），封裝一個(gè)生成隨機(jī)數(shù)的方法，為線條和圓形的繪制設(shè)置隨機(jī)的位置，既然是隨機(jī)的，必然是有隨機(jī)的區(qū)間，先獲取畫布的寬高，線條和圓的位置就是（0~畫布的寬高區(qū)間）的隨機(jī)位置，再定義一個(gè)隨機(jī)字符，獲取隨機(jī)的索引值，即可生成隨機(jī)的驗(yàn)證碼。需要刷新，直接把以下代碼封裝在函數(shù)里，用一個(gè)事件觸發(fā)即可。

源代碼：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>canvas驗(yàn)證碼</title>
</head>
<body>
<canvas id="code" width="80" height="30" ></canvas>

<script src="jq/jquery-3.2.1.min.js"></script>
<script>
 var canvasW=$("#code").width();
 var canvasH=$("#code").height();
 //獲取任意區(qū)間隨機(jī)數(shù)
 var getRandom=function (maxNum) {
 return Math.floor(Math.random()*maxNum);
 }
 //隨機(jī)顏色
 var getColor=function () {
 var r=getRandom(256),
 g=getRandom(256),
 b=getRandom(256);
 return "rgb("+[r,g,b].join(',')+")";
 }
 var ctx=$("#code")[0].getContext("2d");
 var lineNum=3,arcNum=20;

 //繪制線
 for (var i=0;i<lineNum;i++){
 ctx.beginPath();
 ctx.moveTo(getRandom(canvasW),getRandom(canvasH));
 ctx.lineTo(getRandom(canvasW),getRandom(canvasH));
 ctx.strokeStyle=getColor();
 ctx.closePath();
 ctx.stroke();
 }
 //繪制點(diǎn)
 for (var i=0;i<arcNum;i++){
 ctx.beginPath();
 ctx.arc(getRandom(canvasW),getRandom(canvasH),1,0,2*Math.PI);
 ctx.fillStyle=getColor();
 ctx.closePath();
 ctx.fill();
 }
 //繪制驗(yàn)證碼
 var codeTxt="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";;
 for(var i=0;i<4;i++){
 var txt=codeTxt.split("")[getRandom(codeTxt.length)];
 //繪制驗(yàn)證碼
 ctx.beginPath();
 ctx.font="23px 微軟雅黑";
 ctx.fillStyle=getColor();
 ctx.fillText(txt,20*i,25);
 ctx.closePath();
 }
</script>
</body>
</html>

最終效果：

JavaScript使用canvas繪制隨機(jī)驗(yàn)證碼

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章題目：JavaScript使用canvas繪制隨機(jī)驗(yàn)證碼
本文鏈接：http://muchs.cn/article8/piopip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、外貿(mào)建站、做網(wǎng)站、網(wǎng)站改版、網(wǎng)頁(yè)設(shè)計(jì)公司、品牌網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容