js实现验证码干扰(静态)


Posted in Javascript onFebruary 22, 2021

本文实例为大家分享了js实现验证码干扰的具体代码,供大家参考,具体内容如下

效果

js实现验证码干扰(静态)

代码

<!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');
  //获得绘画环境
  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);
  //获得像素点的个数
  var dian=alldata.data.length/4;
  for(var i=0;i<10000;i++){
  //取随机数
  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);
  }
  //将数据写回画板
  cv.putImageData(alldata,0,0);
 </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
vue实现记事本功能
Jun 26 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 #Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 #Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 #Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 #Javascript
k8s node节点重新加入master集群的实现
Feb 22 #Javascript
js实现简单图片拖拽效果
Feb 22 #Javascript
用vite搭建vue3应用的实现方法
Feb 22 #Vue.js
You might like
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
Python三级目录展示的实现方法
2016/09/28 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
python实现录音小程序
2020/10/26 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
500行python代码实现飞机大战
2020/04/24 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
广告学专业自荐信范文
2014/02/24 职场文书
党员干部承诺书范文
2014/03/25 职场文书
小学生手册家长评语
2014/04/16 职场文书
欢迎横幅标语
2014/06/17 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电