溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關使用js+canvas實現繪制圖形驗證碼，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
思路：通過隨機獲取指定字符串的指定數的字符，通過canvas繪制出來
返回指定范圍的隨機整數
//指定范圍的隨機函數：返回指定范圍內的隨機整數
function rand(min, max) {
/*
max=10
min=1
Math.random()=0 最小取到1
Math.random()=0.9999*10=Math.floor(9.9)=>+1=10
*/
return Math.floor(Math.random() * (max - min + 1)) + min;
}返回指定數量的隨機字符串
function randStr(count) {
var str = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var code = '';
for (var i = 0; i < count; i++) {
var index = rand(0, str.length - 1)//必須減一否則會出現下標越界
code += str.charAt(index) + ' ';
}
return code
}繪制圖形
function verify(selector) {
//獲取canvas的dom對象
var cas = document.querySelector(selector);
//獲取上下文對象
var ctx = cas.getContext('2d');
//指定接收的字符串
var code = randStr(5);
//繪制矩形，作背景色
ctx.fillStyle = 'orange';
//繪制實心矩形
ctx.fillRect(0, 0, 160, 50)
//文字居中
// ctx.textAlign = 'left'
//字體樣式的屬性要遵循css中的書寫順序
ctx.font = '900 24px 宋體'
//設置字體顏色
ctx.fillStyle = '#FFF';
//繪制文字
ctx.fillText(code, 20, 30);
}鼠標點擊更新驗證碼
document.querySelector('canvas').addEventListener('click', function () {
verify('canvas')
})完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>繪制圖形驗證碼</title>
<style>
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas width="160" height="50"></canvas>
</body>
<script>
verify('canvas')
document.querySelector('canvas').addEventListener('click', function () {
verify('canvas')
})
function verify(selector) {
//獲取canvas的dom對象
var cas = document.querySelector(selector);
//獲取上下文對象
var ctx = cas.getContext('2d');
//指定接收的字符串
var code = randStr(5);
//繪制矩形，作背景色
ctx.fillStyle = 'orange';
//繪制實心矩形
ctx.fillRect(0, 0, 160, 50)
//字體樣式的屬性要遵循css中的書寫順序
ctx.font = '900 24px 宋體'
//設置字體顏色
ctx.fillStyle = '#FFF';
//繪制文字
ctx.fillText(code, 20, 30);
}
//指定范圍的隨機函數：返回指定范圍內的隨機整數
function rand(min, max) {
/*
max=10
min=1
Math.random()=0 最小取到1
Math.random()=0.9999*10=Math.floor(9.9)=>+1=10
*/
return Math.floor(Math.random() * (max - min + 1)) + min;
}
//返回隨機字符串
function randStr(count) {
var str = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var code = '';
for (var i = 0; i < count; i++) {
var index = rand(0, str.length - 1)//必須減一否則會出現下標越界
code += str.charAt(index) + ' ';
}
return code
}
// console.log(randStr(6))
</script>
</html>以上就是使用js+canvas實現繪制圖形驗證碼，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
