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隐藏控件的方法
Sep 21 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 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
php SQL之where语句生成器
2009/03/24 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
xml转json的js代码
2012/08/28 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
python手写均值滤波
2020/02/19 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
德国团购网站:Groupon德国
2018/03/13 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
设计部经理的岗位职责
2013/11/16 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
大学生学习计划书
2014/09/15 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
教师党员自我评价范文
2015/03/04 职场文书
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS