JS+HTML5 canvas绘制验证码示例


Posted in Javascript onDecember 05, 2018

本文实例讲述了JS+HTML5 canvas绘制验证码。分享给大家供大家参考,具体如下:

css样式:

<style>
body{
  text-align: center;
}
canvas{
  background:#ddd;
}
</style>

HTML部分:

body中添加标签canvas:

<canvas id="c3"></canvas>

js部分:

//创建两个变量保存验证码的宽度和高度
  var w = 120;
  var h = 30;
//将变量值赋值给canvas
  c3.width = w;
  c3.height = h;
//获取画笔
  var ctx = c3.getContext("2d");
//创建两个函数,返回指定范围内的随机数,随机颜色
//随机数
  function rn(min,max){
    var n = Math.random()*(max-min)+min;
    return Math.floor(n);
  }
//随机颜色
  function rc(min,max){
    var r = rn(min,max);
    var g = rn(min,max);
    var b = rn(min,max);
    return `rgb(${r},${g},${b})`;
}
//填充的背景
  ctx.fillStyle=rc(180,230);
  ctx.fillRect(0,0,w,h);
//创建一个随机的文字[字母和数字]4个
  var pool = "ABCDEFGHIJKabced胡歌0123456789哈哼哈哈";
  var str ="";
  for(var i = 0;i<4;i++){
    var index = Math.floor(Math.random()*pool.length);
    str +=pool[index];
}
//console.log(str);
  ctx.font = "30px SimHei";
  ctx.fillStyle = rc(80,180);//文字颜色
  ctx.textBaseline="top";
  ctx.fillText(str,20,0);//在(20,0)处开始填充文字
//绘制6条干扰线
  for(var i = 0;i<6;i++){
    ctx.strokeStyle = rc(0,255);
    ctx.beginPath();
    ctx.moveTo(rn(0,w),rn(0,h));
    ctx.lineTo(rn(0,w),rn(0,h));
    ctx.stroke();
  }
//绘制50个干扰点
  for(var i = 0;i<50;i++){
    ctx.fillStyle = rc(0,255);
    ctx.beginPath();
    ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI);
    ctx.fill();
  }

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun,测试上述代码运行效果。

或者使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,测试如下完整示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com canvas绘制验证码</title>
<style>
body{
  text-align: center;
}
canvas{
  background:#ddd;
}
</style>
</head>
<body>
<canvas id="c3"></canvas>
<script>
//创建两个变量保存验证码的宽度和高度
  var w = 120;
  var h = 30;
//将变量值赋值给canvas
  c3.width = w;
  c3.height = h;
//获取画笔
  var ctx = c3.getContext("2d");
//创建两个函数,返回指定范围内的随机数,随机颜色
//随机数
  function rn(min,max){
    var n = Math.random()*(max-min)+min;
    return Math.floor(n);
  }
//随机颜色
  function rc(min,max){
    var r = rn(min,max);
    var g = rn(min,max);
    var b = rn(min,max);
    return `rgb(${r},${g},${b})`;
}
//填充的背景
  ctx.fillStyle=rc(180,230);
  ctx.fillRect(0,0,w,h);
//创建一个随机的文字[字母和数字]4个
  var pool = "ABCDEFGHIJKabced胡歌0123456789哈哼哈哈";
  var str ="";
  for(var i = 0;i<4;i++){
    var index = Math.floor(Math.random()*pool.length);
    str +=pool[index];
}
//console.log(str);
  ctx.font = "30px SimHei";
  ctx.fillStyle = rc(80,180);//文字颜色
  ctx.textBaseline="top";
  ctx.fillText(str,20,0);//在(20,0)处开始填充文字
//绘制6条干扰线
  for(var i = 0;i<6;i++){
    ctx.strokeStyle = rc(0,255);
    ctx.beginPath();
    ctx.moveTo(rn(0,w),rn(0,h));
    ctx.lineTo(rn(0,w),rn(0,h));
    ctx.stroke();
  }
//绘制50个干扰点
  for(var i = 0;i<50;i++){
    ctx.fillStyle = rc(0,255);
    ctx.beginPath();
    ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI);
    ctx.fill();
  }
</script>
</body>
</html>

运行结果如下:

JS+HTML5 canvas绘制验证码示例

更多关于JavaScript相关内容还可查看本站专题:《JavaScript+HTML5特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 动态生成私有变量访问器
Dec 06 Javascript
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
jQuery插件开发全解析
Oct 10 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 #Javascript
JS实现简单的点赞与踩功能示例
Dec 05 #Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 #Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 #Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 #Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 #Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 #Javascript
You might like
用PHP程序实现支持页面后退的两种方法
2008/06/30 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
详解Vue 方法与事件处理器
2017/06/20 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
远程调用的原理
2014/07/05 面试题
毕业生护理专业个人求职信范文
2014/01/04 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
求职信模板
2014/05/23 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
写给领导的感谢信
2015/01/22 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android