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>

最终效果:

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

时间: 2020-02-14

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+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实现验证码

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

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

JS简单生成随机数(随机密码)的方法

本文实例讲述了JS简单生成随机数(随机密码)的方法.分享给大家供大家参考,具体如下: 1. Math.random()生成一个0~1的随机数 0<=Math.random()<1 2. Math.random()*100 则生成一个0~100之间的随机数 3. Math.random()*100 + 100 则生成一个100~200之间的随机数 4. 所以Math.random()*m 则生成一个0~m的随机数 实例代码如下: <!DOCTYPE html PUBLIC "-/

asp.net简单生成验证码的方法

本文实例讲述了asp.net简单生成验证码的方法.分享给大家供大家参考,具体如下: 1.新建一个一般处理程序 namespace WebApplication1 { /// <summary> /// $codebehindclassname$ 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfil

JS简单生成两个数字之间随机数的方法

本文实例讲述了JS简单生成两个数字之间随机数的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整代码如下: <!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/xh

Python实现简单生成验证码功能【基于random模块】

本文实例讲述了Python实现简单生成验证码功能.分享给大家供大家参考,具体如下: 验证码一般用来验证登陆.交易等行为,减少对端为机器操作的概率,python中可以使用random模块,char()内置函数来实现一个简单的验证码功能. import random def veri_code(): li = [] for i in range(6): #循环6次,生成6个字符 r = random.randrange(0, 5) #随机生成0-4之间的数字 if r == 1 or r == 4:

JS简单生成由字母数字组合随机字符串示例

本文实例讲述了JS简单生成由字母数字组合随机字符串.分享给大家供大家参考,具体如下: 前言 最近有个需求,是需要生成3-32位长度的字母数字组合的随机字符串,另一个是生成43位随机字符串. 方法一 奇妙的写法 Math.random().toString(36).substr(2); 输出结果 解释 很有意思,研究了一下,基本上toString后的参数规定可以是2-36之间的任意整数,不写的话默认是10(也就是十进制),此时返回的值就是那个随机数. 若是偶数,返回的数值字符串都是短的,若是奇数,

C# 生成验证码取随机数字加字母(改进版)

之前一直用的生成验证码方法,取4位数字没有问题,结果加上字母,取6位后,效率非常低. 改进了一下,方法如下 复制代码 代码如下: var text2 = ""; var random = new Random((int)DateTime.Now.Ticks); const string textArray = "23456789ABCDEFGHGKLMNPQRSTUVWXYZ"; for (var i = 0; i < iVcodeNum; i++) { te

js+html5实现canvas绘制简单矩形的方法

本文实例讲述了js+html5实现canvas绘制简单矩形的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not sup

JSP验证码简单生成方法

本文实例讲述了JSP验证码简单生成方法.分享给大家供大家参考.具体如下: <%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %> <%! Color getRandColor(int fc,int bc){//给定范围获得随机颜色 Random random = new Random(); if(fc&

Angular.js实现获取验证码倒计时60秒按钮的简单方法

前言 本文主要介绍了关于Angular.js实现获取验证码倒计时60秒按钮的相关内容,关于这个功能相信不用多介绍,大家都不陌生,所以下面话不多说了,来一起看看实现的方法吧. 一.controller中代码 angular.module('controllers') .controller('LoginCtrl', function ($scope, $location,$ionicLoading,$rootScope,$interval,$timeout) { $scope.timer = fa