电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

原生js+canvas實現驗證碼

瀏覽:125日期:2024-04-11 13:18:13

本文實例為大家分享了js+canvas實現驗證碼的具體代碼,供大家參考,具體內容如下

效果展示:

原生js+canvas實現驗證碼

源碼展示:

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title></head><body><style> canvas { border: 1px solid #000; vertical-align: bottom; } input { padding: 0; width: 120px; height: 30px; vertical-align: bottom; border: 1px solid #000; } </style> <input type='text' name='textContent' placeholder='輸入'><canvas height='30'></canvas><button>提交</button> <script> /*1、背景顏色時隨機的 * 2、其中的內容是隨機的 * 3、內容的顏色 隨機的 * 4、每個字的旋轉度數隨機的 * 5、文本的大小隨機的 * 6、干擾線的位置隨機的 * 7、干擾線的顏色隨機的 * 8、干擾點 * */ var btn = document.querySelector('button'); var can = document.querySelector('canvas'); var ctx = can.getContext('2d'); var text = '0123456789abcdefghijklmnopqrstuvwsyzABCDEFGHIGKLMNOPQRSTUVWSYZ'; //設置4個內容 將canvas 平分成4分 然后讓內容在1/4的空間旋轉縮放 //原理 :每次都是位移旋轉之后再回復原位 for (var i = 0; i < 4; i++) { var txt = text[randNum(0,text.length-1)]; ctx.fillStyle = getRandColor(80,150); ctx.font=randNum(12,25)+'px ’宋體’'; ctx.textBaseline = 'top'; var x = randNum(0,10); var deg = randNum(-30,30); ctx.translate(x+30*i,0); ctx.rotate(Math.PI/180*deg); ctx.fillText(txt,0,0); ctx.rotate(Math.PI/180*-deg); ctx.translate(-(x+30*i),0); } /*干擾點*/ for(var i=0;i<30;i++){ ctx.beginPath(); ctx.arc(randNum(0,120),randNum(0,30),1,0,Math.PI*2); ctx.fillStyle=getRandColor(150,180); ctx.fill(); } /*干擾線*/ for(var i=0;i<4;i++){ ctx.beginPath(); ctx.moveTo(randNum(0,120),randNum(0,30)); ctx.lineTo(randNum(0,120),randNum(0,30)); ctx.strokeStyle=getRandColor(150,180); ctx.lineWidth= randNum(1,2); ctx.stroke(); } /* 獲取隨機色值*/ // a 先獲取一個隨機數 console.log(Math.random()); //產生一個0~1之間的隨機小數 var num = Math.random() * (100 - 30 + 1) + 30; //產生一個隨機數30~100 之間的數 console.log(num); // b 獲取一個區間段的隨機數(整數) function randNum(min, max) { return parseInt(Math.random() * (max - min + 1) + min); } // c獲取隨機顏色值 function getRandColor(min, max) { var R = randNum(min, max); var G = randNum(min, max); var B = randNum(min, max); return ’rgb(’ + R + ’,’ + G + ’,’ + B + ’)’; } </script> </body></html>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 铆钉机|旋铆机|东莞旋铆机厂家|鸿佰专业生产气压/油压/自动铆钉机 | 接地电阻测试仪[厂家直销]_电缆故障测试仪[精准定位]_耐压测试仪-武汉南电至诚电力设备 | 防爆大气采样器-防爆粉尘采样器-金属粉尘及其化合物采样器-首页|盐城银河科技有限公司 | 斗式提升机_链式斗提机_带式斗提机厂家无锡市鸿诚输送机械有限公司 | 检验科改造施工_DSA手术室净化_导管室装修_成都特殊科室建设厂家_医疗净化工程公司_四川华锐 | 喷码机,激光喷码打码机,鸡蛋打码机,手持打码机,自动喷码机,一物一码防伪溯源-恒欣瑞达有限公司 | 电子厂招聘_工厂招聘_普工招聘_小时工招聘信息平台-众立方招工网 | 彼得逊采泥器-定深式采泥器-电动土壤采样器-土壤样品风干机-常州索奥仪器制造有限公司 | 滤芯,过滤器,滤油机,贺德克滤芯,精密滤芯_新乡市宇清流体净化技术有限公司 | 深圳宣传片制作-企业宣传视频制作-产品视频拍摄-产品动画制作-短视频拍摄制作公司 | 杜康白酒加盟_杜康酒代理_杜康酒招商加盟官网_杜康酒厂加盟总代理—杜康酒神全国运营中心 | 杭州月嫂技术培训服务公司-催乳师培训中心报名费用-产后康复师培训机构-杭州优贝姆健康管理有限公司 | 浙江华锤电器有限公司_地磅称重设备_防作弊地磅_浙江地磅售后维修_无人值守扫码过磅系统_浙江源头地磅厂家_浙江工厂直营地磅 | 无缝钢管-聊城无缝钢管-小口径无缝钢管-大口径无缝钢管 - 聊城宽达钢管有限公司 | 艾乐贝拉细胞研究中心 | 国家组织工程种子细胞库华南分库 | PE拉伸缠绕膜,拉伸缠绕膜厂家,纳米缠绕膜-山东凯祥包装 | 旋振筛_不锈钢旋振筛_气旋筛_旋振筛厂家—新乡市大汉振动机械有限公司 | 【中联邦】增稠剂_增稠粉_水性增稠剂_涂料增稠剂_工业增稠剂生产厂家 | 河南中专学校|职高|技校招生-河南中职中专网 | 急救箱-应急箱-急救包厂家-北京红立方医疗设备有限公司 | 深圳展厅设计_企业展馆设计_展厅设计公司_数字展厅设计_深圳百艺堂 | 礼至家居-全屋定制家具_一站式全屋整装_免费量房设计报价 | 玻璃钢格栅盖板|玻璃钢盖板|玻璃钢格栅板|树篦子-长沙川皖玻璃钢制品有限公司 | 水厂自动化-水厂控制系统-泵站自动化|控制系统-闸门自动化控制-济南华通中控科技有限公司 | 医疗仪器模块 健康一体机 多参数监护仪 智慧医疗仪器方案定制 血氧监护 心电监护 -朗锐慧康 | Duoguan 夺冠集团 | 锯边机,自动锯边机,双面涂胶机-建业顺达机械有限公司 | 短信营销平台_短信群发平台_106短信发送平台-河南路尚 | Eiafans.com_环评爱好者 环评网|环评论坛|环评报告公示网|竣工环保验收公示网|环保验收报告公示网|环保自主验收公示|环评公示网|环保公示网|注册环评工程师|环境影响评价|环评师|规划环评|环评报告|环评考试网|环评论坛 - Powered by Discuz! | 聚氨酯催化剂K15,延迟催化剂SA-1,叔胺延迟催化剂,DBU,二甲基哌嗪,催化剂TMR-2,-聚氨酯催化剂生产厂家 | 电位器_轻触开关_USB连接器_广东精密龙电子科技有限公司 | 武汉不干胶印刷_标签设计印刷_不干胶标签印刷厂 - 武汉不干胶标签印刷厂家 | SOUNDWELL 编码器|电位器|旋转编码器|可调电位器|编码开关厂家-广东升威电子制品有限公司 | 翰墨AI智能写作助手官网_人工智能问答在线AI写作免费一键生成 | 全自动烧卖机厂家_饺子机_烧麦机价格_小笼汤包机_宁波江北阜欣食品机械有限公司 | 密封无忧网 _ 专业的密封产品行业信息网 | 齿轮减速电机一体机_蜗轮蜗杆减速马达-德国BOSERL齿轮减速机带电机生产厂家 | 细砂提取机,隔膜板框泥浆污泥压滤机,螺旋洗砂机设备,轮式洗砂机械,机制砂,圆锥颚式反击式破碎机,振动筛,滚筒筛,喂料机- 上海重睿环保设备有限公司 | 出国劳务公司_正规派遣公司[严海]| 钢木实验台-全钢实验台-化验室通风柜-实验室装修厂家-杭州博扬实验设备 | 设定时间记录电子秤-自动累计储存电子秤-昆山巨天仪器设备有限公司 |