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 相关文章推荐
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 Javascript
详解react组件通讯方式(多种)
May 06 Javascript
基于canvas实现手写签名(vue)
May 21 Javascript
解决Vue项目中tff报错的问题
Oct 21 Javascript
Vue实现简单计算器
Jan 20 Vue.js
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
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
JS request函数 用来获取url参数
2010/05/17 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
详解numpy的argmax的具体使用
2019/05/27 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
主题酒店策划书
2014/01/28 职场文书
三查三看党性分析材料
2014/02/18 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
终止劳动合同协议书
2014/10/05 职场文书
写景作文评语集锦
2014/12/25 职场文书
倡议书作文
2015/01/19 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
Python爬虫基础初探selenium
2021/05/31 Python
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python