js實現(xiàn)驗證碼干擾（靜態(tài)）
更新時間：2021年02月22日 16:50:17 作者：lzh~
這篇文章主要為大家詳細介紹了js實現(xiàn)驗證碼干擾，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)驗證碼干擾的具體代碼，供大家參考，具體內(nèi)容如下
效果
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
canvas{
background: #272822;
}
</style>
</head>
<body>
<canvas id='canvas' width='800' height='500'></canvas>
<script>
//獲得畫板
var canvas=document.getElementById('canvas');
//獲得繪畫環(huán)境
var cv=canvas.getContext('2d');
cv.fillStyle='#272822';
cv.fillRect(0,0,800,500);
cv.font='80px 微軟雅黑';
cv.fillStyle='greenyellow';
cv.fillText( Math.floor(Math.random()*10000),200,200);
//獲得所有的圖像像素點信息
var alldata=cv.getImageData(0,0,800,500);
//獲得像素點的個數(shù)
var dian=alldata.data.length/4;
for(var i=0;i<10000;i++){
//取隨機數(shù)
var num=Math.floor(Math.random()*dian);
//計算像素點對應的四條信息從幾號開始
var start=(num-1)*4;
alldata.data[start]=Math.floor(Math.random()*256);
alldata.data[start+1]=Math.floor(Math.random()*256);
alldata.data[start+2]=Math.floor(Math.random()*256);
}
//將數(shù)據(jù)寫回畫板
cv.putImageData(alldata,0,0);
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
微信小程序報錯: thirdScriptError的錯誤問題
這篇文章主要介紹了微信小程序報錯: thirdScriptError,本文給大家分享解決方法，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
本文主要介紹JS原型鏈的知識，這里整理了相關資料及簡單實現(xiàn)示例代碼，有興趣的小伙伴可以參考下2016-09-09
IE6/7 and IE8/9/10(IE7模式)依次隱藏具有absolute或relative的父元素和子元素后再顯示
多數(shù)情況下隱藏(設置display:none)一個元素，無需依次將其內(nèi)的所有子元素都隱藏。非要這么做，有時會碰到意想不到的bug。2011-07-07
這篇文章主要介紹了js手機號4位顯示空格，銀行卡每4位顯示空格效果，手機號和銀行卡號，按照每4位顯示一個空格的需求，非常具有實用價值，需要的朋友可以參考下。2017-03-03
最近在做Web 頁面，雖然不是很喜歡，不過既然公司安排了，就好好做吧，還是學了不少東西。2009-06-06
今天小編就為大家分享一篇 layui擴展上傳組件模擬進度條的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript數(shù)組去重的五種方法及其他細節(jié)和拓展
JavaScript數(shù)組去重這個問題,經(jīng)常出現(xiàn)在面試題中,下面這篇文章主要給大家介紹了關于JavaScript數(shù)組去重的五種方法及其他細節(jié)和拓展的相關資料,文中通過實例代碼以及圖文介紹的非常詳細,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了javascript設計簡單的秒表計時器，該秒表將包括兩個按鈕和一個用于顯示時間的文本框，當單擊開始按鈕時開始計時，最小單位為0.01秒，此時再次單擊按鈕則停止計時，文本框顯示經(jīng)過的時間，需要的朋友可以參考下2015-11-11
這篇文章主要介紹了純js實現(xiàn)放大縮小拖拽功能，文中給大家提到了在開發(fā)過程中遇到的一些問題及解決方法,需要的朋友可以參考下2019-11-11
Popup彈出框添加數(shù)據(jù)實現(xiàn)方法
這篇文章主要為大家詳細介紹了Popup彈出框添加數(shù)據(jù)的簡單實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10