溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了使用canvas繪制隨機驗證碼的具體代碼，供大家參考，具體內容如下
理論基礎：
掌握使用canvas繪制線條和圓形以及繪制文字
實現思路：
先構建一個畫布，設置一定的寬高（在canvas中設置寬高和在style中設置是有區別的，建議直接在canvas標簽中設置），封裝一個生成隨機數的方法，為線條和圓形的繪制設置隨機的位置，既然是隨機的，必然是有隨機的區間，先獲取畫布的寬高，線條和圓的位置就是（0~畫布的寬高區間）的隨機位置，再定義一個隨機字符，獲取隨機的索引值，即可生成隨機的驗證碼。需要刷新，直接把以下代碼封裝在函數里，用一個事件觸發即可。
源代碼：
<!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驗證碼</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();
//獲取任意區間隨機數
var getRandom=function (maxNum) {
return Math.floor(Math.random()*maxNum);
}
//隨機顏色
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();
}
//繪制點
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();
}
//繪制驗證碼
var codeTxt="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";;
for(var i=0;i<4;i++){
var txt=codeTxt.split("")[getRandom(codeTxt.length)];
//繪制驗證碼
ctx.beginPath();
ctx.font="23px 微軟雅黑";
ctx.fillStyle=getColor();
ctx.fillText(txt,20*i,25);
ctx.closePath();
}
</script>
</body>
</html>
最終效果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
