溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關使用canvas怎么實現一個圖形驗證碼功能，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="100" height="40">
您的瀏覽器不支持canvas
</canvas>
</body>
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");
//隨機字符（透明度）（大小隨機，位置隨機）；
var strStore = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
//隨機函數
function roundNum(min, max) {
return parseInt(Math.random() * (max - min) + min);
}
//文字內容部分：
var str = "";
for(var i = 0; i < 5; i++) {
context.beginPath();
//隨機顏色（淺色：RGB - 200~250）
var color = `rgb(${roundNum(0,255)},${roundNum(0,255)},${roundNum(0,255)})`;
context.fillStyle = color;
context.font = roundNum(20,30)+"px Arial";
context.textAlign = "center";
str = strStore[roundNum(0,strStore.length)];
context.fillText(str, 10 + 18 * i, roundNum(20,35));
}
//10個左右的隨機（長度隨機，位置隨機），干擾線
for(var j = 0; j < roundNum(5, 10); j++) {
context.beginPath();
var color = `rgb(${roundNum(0,255)},${roundNum(0,255)},${roundNum(0,255)})`;
context.strokeStyle = color;
context.moveTo(roundNum(0, 100), roundNum(0, 40));
context.lineTo(roundNum(0, 100), roundNum(0, 40));
context.stroke();
}
//干擾項：10個左右的隨機（半徑隨機，位置隨機），干擾圓
for(var j = 0; j < roundNum(5, 10); j++) {
context.beginPath();
context.fillStyle = color;
context.arc(roundNum(0, 100), roundNum(0, 40), roundNum(0, 5), Math.PI * 2 / (roundNum(1, 360)), Math.PI * 2 / (roundNum(1, 360)));
context.fill();
}
</script>
</html>結果如圖：
以上就是使用canvas怎么實現一個圖形驗證碼功能，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
