溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關JavaScript中怎么生成隨機驗證碼，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
利用canvas制作一個隨機驗證碼：
1、clearRect：context.clearRect(x,y,width,height);清空給定矩形內的指定像素
2、fillStyle：設置畫筆的顏色
3、rotate(deg)：旋轉角度，以弧度旋轉(弧度=degrees*Math.PI/180 )
4、translate()： 方法重新映射畫布上的位置
5、Math.random()：獲取0-1之間的一個隨機數，不包含1
<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas隨機驗證碼</title>
</head>
<body>
<canvas id="canvas" width="100" height="40" ></canvas>
</body>
<script type="text/javascript">
var myCanvas = document.querySelector("#canvas");
var blur = myCanvas.getContext("2d");
// 當點擊畫布時創建一個新的路徑
// 驗證碼封裝
myCanvas.onclick = function() {
// 實現點擊畫布創建一個新的驗證碼
blur.clearRect(0,0,100,40);
verify();
}
verify();
function verify() {
// 繪制矩形框
// blur.strokeRect(0,0,100,40);
// 隨機驗證碼
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "s", "t", "u",
"v", "w", "x", "y", "z", "A", "B", "C", "D", "F", "G", "H", "I", "J", "K", "L", "S", "T", "U", "V", "W", "X", "Y",
"Z"
];
// 顯示四位數的驗證碼
for (var i = 0; i < 4; i++) {
var x = 20 + 20 * i;
var y = 20 + 10 * Math.random();
// console.log(x,y);
// 在數組中獲取到隨機的索引整數
var index = Math.floor(Math.random() * arr.length);
// 通過隨機的索引獲取到隨機的元素
var texts = arr[index];
// 設置驗證碼的相關樣式
blur.font = "bold 20px 微軟雅黑";
blur.fillStyle = textColor();
// 畫布旋轉顯示
// translate() 方法重新映射畫布上的位置
blur.translate(x, y);
// 將畫布旋轉，旋轉角度，以弧度旋轉(弧度=degrees*Math.PI/180 )
var deg = 90 * Math.random() * Math.PI / 180;
blur.rotate(deg); //
blur.fillText(texts, 0, 0);
// 將畫布映射返回原來的位置
blur.rotate(-deg);
blur.translate(-x, -y);
}
// 制作驗證碼的干擾線制作
for(var i=0;i<6;i++){
blur.beginPath();
blur.moveTo(Math.random()*100,Math.random()*40);
blur.lineTo(Math.random()*100,Math.random()*40);
// 設置干擾線的顏色
blur.strokeStyle=textColor();
blur.stroke();
}
// 制作驗證碼的干擾圓點
for(var i=0;i<20;i++){
blur.beginPath();
var x=Math.random()*100;
var y=Math.random()*100;
blur.moveTo(x,y);
blur.lineTo(x+1,y+1);
// 設置干擾線的顏色
blur.strokeStyle=textColor();
blur.stroke();
}
}
// 獲取隨機顏色封裝
function textColor(){
var red=Math.floor(Math.random()*256);
var green=Math.floor(Math.random()*256);
var blue=Math.floor(Math.random()*256);
return "rgb("+red+","+green+","+blue+")";
}
</script>
</html>| x | 要清除的矩形左上角的 x 坐標 |
| y | 要清除的矩形左上角的 y 坐標 |
| width | 要清除的矩形的寬度，以像素計 |
| height | 要清除的矩形的高度，以像素計 |
關于JavaScript中怎么生成隨機驗證碼就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
