JavaScript使用canvas绘制随机验证码

本文实例为大家分享了使用canvas绘制随机验证码的具体代码，供大家参考，具体内容如下

理论基础：

掌握使用canvas绘制线条和圆形以及绘制文字

实现思路：

先构建一个画布，设置一定的宽高（在canvas中设置宽高和在style中设置是有区别的，建议直接在canvas标签中设置），封装一个生成随机数的方法，为线条和圆形的绘制设置随机的位置，既然是随机的，必然是有随机的区间，先获取画布的宽高，线条和圆的位置就是（0~画布的宽高区间）的随机位置，再定义一个随机字符，获取随机的索引值，即可生成随机的验证码。需要刷新，直接把以下代码封装在函数里，用一个事件触发即可。

源代码：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>canvas验证码</title>
</head>
<body>
<canvas id="code" width="80" height="30" style="border: 1px solid #ccc"></canvas>

<script src="jq/jquery-3.2.1.min.js"></script>
<script>
 var canvasW=$("#code").width();
 var canvasH=$("#code").height();
 //获取任意区间随机数
 var getRandom=function (maxNum) {
 return Math.floor(Math.random()*maxNum);
 }
 //随机颜色
 var getColor=function () {
 var r=getRandom(256),
 g=getRandom(256),
 b=getRandom(256);
 return "rgb("+[r,g,b].join(',')+")";
 }
 var ctx=$("#code")[0].getContext("2d");
 var lineNum=3,arcNum=20;

 //绘制线
 for (var i=0;i<lineNum;i++){
 ctx.beginPath();
 ctx.moveTo(getRandom(canvasW),getRandom(canvasH));
 ctx.lineTo(getRandom(canvasW),getRandom(canvasH));
 ctx.strokeStyle=getColor();
 ctx.closePath();
 ctx.stroke();
 }
 //绘制点
 for (var i=0;i<arcNum;i++){
 ctx.beginPath();
 ctx.arc(getRandom(canvasW),getRandom(canvasH),1,0,2*Math.PI);
 ctx.fillStyle=getColor();
 ctx.closePath();
 ctx.fill();
 }
 //绘制验证码
 var codeTxt="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";;
 for(var i=0;i<4;i++){
 var txt=codeTxt.split("")[getRandom(codeTxt.length)];
 //绘制验证码
 ctx.beginPath();
 ctx.font="23px 微软雅黑";
 ctx.fillStyle=getColor();
 ctx.fillText(txt,20*i,25);
 ctx.closePath();
 }
</script>
</body>
</html>

最终效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js+canvas实现验证码功能

    js+canvas实现验证码功能

    刚刚开始接触canvas,写个验证码小功能练练手,实现效果图如下: 主要代码如下: html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <

  • js+canvas实现滑动拼图验证码功能

    上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的.我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图.下面介绍具体步骤. 首先随便找一张图片渲染到canvas上,这里#canvas作为画布,#block作为裁剪出来的小滑块. <canvas width="310" height="155" id="canvas"></canvas> <canvas width=&q

  • 使用canvas及js简单生成验证码方法

    在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点.验证码生成步骤是: 1.生成一张画布canvas 2.生成随机数验证码 3.在画布中生成干扰线 4.把验证码文本填充到画布中 5.点击画布更换验证码 结构与样式: <canvas id="mycanvas" width='90' height='40'> 您的浏览器不支持canvas,请换个浏览器试试~ </canvas> <style> #mycanvas{ curso

  • JavaScript Canvas实现验证码

    在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写. 但是在前端,用canva或者SVG也可以绘制验证码. 绘制验证码不能是简单的随机字符串,而应该在绘制界面有一些干扰项: 如:干扰线段.干扰圆点.背景等等. 这里的这个demo的canvas验证码干扰项比较简单. 可以在图示中看到本例中的干扰项. canvas验证码展示效果: 点击实现改变(重绘)验证码: 在控制台运行函数输出返回值

  • JS+HTML5 canvas绘制验证码示例

    JS+HTML5 canvas绘制验证码示例

    本文实例讲述了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 =

  • JavaScript使用canvas绘制随机验证码

    JavaScript使用canvas绘制随机验证码

    本文实例为大家分享了使用canvas绘制随机验证码的具体代码,供大家参考,具体内容如下 理论基础: 掌握使用canvas绘制线条和圆形以及绘制文字 实现思路: 先构建一个画布,设置一定的宽高(在canvas中设置宽高和在style中设置是有区别的,建议直接在canvas标签中设置),封装一个生成随机数的方法,为线条和圆形的绘制设置随机的位置,既然是随机的,必然是有随机的区间,先获取画布的宽高,线条和圆的位置就是(0~画布的宽高区间)的随机位置,再定义一个随机字符,获取随机的索引值,即可生成随机的

  • js+canvas绘制图形验证码

    本文实例为大家分享了利用canvas绘制图形验证码的具体代码,供大家参考,具体内容如下 思路:通过随机获取指定字符串的指定数的字符,通过canvas绘制出来 返回指定范围的随机整数 //指定范围的随机函数:返回指定范围内的随机整数 function rand(min, max) { /* max=10 min=1 Math.random()=0 最小取到1 Math.random()=0.9999*10=Math.floor(9.9)=>+1=10 */ return Math.floor(Ma

  • jquery canvas绘制图片验证码实例

    本文实例为大家分享了jquery canvas绘制图片验证码的具体代码,供大家参考,具体内容如下 CSS .identify-code{ position: absolute; right: 6px; top: 50%; width: 118px; height: 40px; margin: -21px 0 0 0; } HTML <span id="code" class="identify-code"> <canvas class="

  • JavaScript利用canvas绘制流星雨效果

    目录 前言 需求分析 实现过程 1.绘制满天繁星 2.满天繁星闪起来 3.绘制流星 4.流星划过夜空 5.流星雨 6.merge视觉盛宴 前言 最近总是梦见一些小时候的故事,印象最深刻的就是夏天坐在屋顶上,看着满天的繁星,一颗,两颗,三颗...不由自主地开始了数星星的过程.不经意间,一颗流星划过夜间,虽然只是转瞬即逝,但它似乎比夜空中的其它繁星更吸引着我.听老人说,看见流星的时候许愿,愿望是可以实现的,此时早已把数星星抛之脑后,开始期待着下一颗流星的出现.但是那天晚上,流星再也没有出现,这也成了

  • JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例

    JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例

    本文实例讲述了JavaScript+html5 canvas绘制缤纷多彩的三角形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { width:500px; heig

  • JavaScript html5 canvas绘制时钟效果

    本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

  • JavaScript+html5 canvas绘制的小人效果

    JavaScript+html5 canvas绘制的小人效果

    本文实例讲述了JavaScript+html5 canvas绘制的小人效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中的缩放</tit

  • JavaScript+html5 canvas绘制渐变区域完整实例

    JavaScript+html5 canvas绘制渐变区域完整实例

    本文实例讲述了JavaScript+html5 canvas绘制渐变区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { border:3px solid gray; } </style> </head&

  • JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例

    JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例

    本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { margin:50px; border:5px solid gray; box-shadow:0p

  • javascript+HTML5 canvas绘制时钟功能示例

    javascript+HTML5 canvas绘制时钟功能示例

    本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas绘制时钟</title> <style> div{text-align:cent

随机推荐