JavaScript使用Canvas繪制一個(gè)驗(yàn)證碼組件
使用Canvas繪制一個(gè)驗(yàn)證碼組件
前言
驗(yàn)證碼，這一日常伴隨我們的要素，是我們在線交互的重要安全保障。你的手機(jī)短信里是否被它占據(jù)半壁江山，今天我們就來聊聊如何在網(wǎng)頁上實(shí)現(xiàn)一個(gè)簡單的驗(yàn)證碼組件。大家在登錄網(wǎng)站時(shí)為了防止被惡意攻擊或者多次點(diǎn)擊操作，使用驗(yàn)證碼是最常用的實(shí)現(xiàn)方式。在學(xué)習(xí)完Canvas后，通過Canvas實(shí)現(xiàn)簡單的驗(yàn)證碼就比較簡單了，該組件已開源上傳npm，可以直接安裝使用，源碼已上傳Git，地址在文尾。
聊聊Canvas
1、在開始繪制Canvas時(shí)，我們需要先創(chuàng)建一個(gè)html節(jié)點(diǎn)，并為其設(shè)置寬高
<canvas id="canvas" width="200" height="150""></canvas>
2、可以使用 cnv.width 和 cnv.height 分別獲取 Canvas 的寬度和高度，可以使用 cnv.getContext("2d")來獲取 canvas 2D 上下文環(huán)境對象。
如何繪制一條直線
使用canvas的 moveTo()和 lineTo()方法，比如將畫筆moveTo(0,0)，移動(dòng)畫筆到極點(diǎn)坐標(biāo)，使用lineTo(100,100),這樣執(zhí)行完兩個(gè)步驟將能夠繪制一條從坐標(biāo)（0，0）到坐標(biāo)（100，100）的一條直線，不過此時(shí)canvas上并不會展示出一條直線，我們還需要調(diào)用stroke()方法結(jié)束繪畫，這樣就能在頁面上看到一條直線。
隨機(jī)畫一條直線：
context.moveTo(Math.random() * Canvas_DOM.width, Math.random() * Canvas_DOM.height);
context.lineTo(Math.random() * Canvas_DOM.width, Math.random() * Canvas_DOM.height);如何繪制一個(gè)點(diǎn)
從上面我們知道了如何繪制一條直線，那么繪制一個(gè)點(diǎn)其實(shí)就是繪制一個(gè)長度為1的直線。
繪制一個(gè)隨機(jī)點(diǎn)：
var x = Math.random() * Canvas_DOM.width;
var y = Math.random() * Canvas_DOM.height;
context.moveTo(x, y);
context.lineTo(x + 1, y + 1);怎么繪制文字
通過fillText(txt, 0, 0)就能在canvas里添加一個(gè)文字，其中txt為需要繪制的內(nèi)容，后面兩個(gè)參數(shù)為文字在canvas中的位置，當(dāng)然也可以通過rotate()和translate()來改變文字的方向和位置。
context.fillText(txt, 0, 0);
context.rotate(-deg);
context.translate(-x, -y);使用fillStyle可以修改文字、線條的顏色
繪制驗(yàn)證碼組件
從上面我們知道了如何繪制直線、點(diǎn)、以及文字，那么一個(gè)驗(yàn)證碼也就由這些組成，我們只需要把他們結(jié)合起來，在點(diǎn)擊驗(yàn)證碼時(shí)，重新繪制一個(gè)隨機(jī)的canvas，就能得到一個(gè)完整的驗(yàn)證碼組件：
<template>
<canvas class="canvas" ref="cav" @click="Refresh"></canvas>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
const show_num = ref<any>([])
const cav = ref<any>(null)
onMounted(() => {
draw();
});
const draw = () => {
var Canvas_DOM = cav.value;
var cav_width = Canvas_DOM.clientWidth;
var cav_height = Canvas_DOM.clientHeight;
var context = Canvas_DOM.getContext('2d');
Canvas_DOM.width = cav_width;
Canvas_DOM.height = cav_height;
var sCode = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
var aCode = sCode.split(',');
var aLength = aCode.length; //獲取到數(shù)組的長度
for (var i = 0; i <= 3; i++) {
var j = Math.floor(Math.random() * aLength); //獲取到隨機(jī)的索引值
var deg = (Math.random() * 30 * Math.PI) / 180; //產(chǎn)生0~30之間的隨機(jī)弧度
var txt = aCode[j]; //得到隨機(jī)的一個(gè)內(nèi)容
show_num.value[i] = txt.toLowerCase();
var x = 50 + i * 20; //文字在canvas上的x坐標(biāo)
var y = 20 + Math.random() * 8; //文字在canvas上的y坐標(biāo)
context.font = 'bold 23px 微軟雅黑';
context.translate(x, y);
context.rotate(deg);
context.fillStyle = _randomColor();
context.fillText(txt, 0, 0);
context.rotate(-deg);
context.translate(-x, -y);
}
for (var i = 0; i <= 5; i++) {
//驗(yàn)證碼上顯示隨機(jī)線條
context.strokeStyle = _randomColor();
context.beginPath();
context.moveTo(Math.random() * Canvas_DOM.width, Math.random() * Canvas_DOM.height);
context.lineTo(Math.random() * Canvas_DOM.width, Math.random() * Canvas_DOM.height);
context.stroke();
}
for (var i = 0; i <= 30; i++) {
//驗(yàn)證碼上顯示隨機(jī)小點(diǎn)
context.strokeStyle = _randomColor();
context.beginPath();
var x = Math.random() * Canvas_DOM.width;
var y = Math.random() * Canvas_DOM.height;
context.moveTo(x, y);
context.lineTo(x + 1, y + 1);
context.stroke();
}
}
const _randomColor = () => {
//得到隨機(jī)的顏色值
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
const Refresh = () => {
draw();
}
</script>
<style scoped>
.canvas {
width: 200px;
height: 40px;
display: inline-block;
margin-left: 12px;
cursor: pointer;
}
</style>使用示例
npm install @fcli/vue-vercode --save-dev 來安裝 在項(xiàng)目中使用 import VerCode from '@fcli/vue-vercode'; const app=createApp(App) app.use(VerCode);
示例：
<div class="content">
<ver-code ref=verCode></ver-code>
</div>獲取驗(yàn)證碼組件的數(shù)據(jù)
let code = verCode.value.show_num.join('');以上就是JavaScript使用Canvas繪制一個(gè)驗(yàn)證碼組件的詳細(xì)內(nèi)容，更多關(guān)于JavaScript Canvas繪制驗(yàn)證碼的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡單打字游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
JS判斷數(shù)組中是否有重復(fù)值得三種實(shí)用方法
數(shù)組中是否有重復(fù)值的判斷方法有很多，本文為大家推薦下比較實(shí)用的3種方法，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
JavaScript實(shí)現(xiàn)頁面跳轉(zhuǎn)的八種方式
這篇文章介紹了JavaScript實(shí)現(xiàn)頁面跳轉(zhuǎn)的八種方式，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
Webpack常見靜態(tài)資源處理-模塊加載器（Loaders）+ExtractTextPlugin插件
這篇文章主要介紹了Webpack常見靜態(tài)資源處理-模塊加載器（Loaders）+ExtractTextPlugin插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Bootstrap開發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖
這篇文章主要為大家詳細(xì)介紹了Bootstrap開發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
有趣的思路~~JS仿 WINXP 注銷桌面漸隱效果...2006-10-10
JavaScript對象轉(zhuǎn)數(shù)組的3種簡單方法小結(jié)
在JavaScript中可以通過Object.keys()結(jié)合Array.map()、Object.entries()或Object.values()等方法將對象轉(zhuǎn)換為數(shù)組,這些方法各有優(yōu)勢,可根據(jù)需要靈活選擇,需要的朋友可以參考下2024-09-09
ReactHooks+ts(函數(shù)組件)實(shí)現(xiàn)原生輪播的示例
這篇文章主要介紹了ReactHooks+ts函數(shù)組件實(shí)現(xiàn)原生輪播，在這里下載依賴第一個(gè)是js依賴第二個(gè)是ts依賴，通過實(shí)例代碼介紹了創(chuàng)建tsx文件的方法,需要的朋友可以參考下2022-05-05
采用自執(zhí)行的匿名函數(shù)解決for循環(huán)使用閉包的問題
這篇文章主要介紹了采用自執(zhí)行的匿名函數(shù)解決for循環(huán)使用閉包的問題,很簡單，但比較實(shí)用，需要的朋友可以參考下2014-09-09
深入理解JavaScript中為什么string可以擁有方法
下面小編就為大家?guī)硪黄钊肜斫釰avaScript中為什么string可以擁有方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05