转载自：https://blog.csdn.net/qq_42463851/article/details/90755734
<!DOCTYPE html>

<html>

<!-- head -->

<head>

  <title>图片登录验证</title>

</head>

<body>

     <input type="text" value="" placeholder="请输入验证码（区分大小写）"

     style="height:43px;position: relative; top:-15px; font-size:20px;"id ="text">

     <canvas id="canvas" width="100" height="43" onclick="dj()"

      style="border: 1px solid #ccc;

        border-radius: 5px;"></canvas>

     <button class="btn" onclick="sublim()">提交</button>

    </body>

<script>

 var show_num = [];

 draw(show_num);

function dj(){

 draw(show_num);

 }

function sublim(){

var val=document.getElementById("text").value;

            var num = show_num.join("");

            if(val==''){

                alert('请输入验证码！');

            }else if(val == num){

                alert('提交成功！');

                document.getElementById(".input-val").val('');

                draw(show_num);

            }else{

                alert('验证码错误！\n你输入的是:  '+val+"\n正确的是:  "+num+'\n请重新输入！');

                document.getElementById("text").value='';

                draw(show_num);

            }

          }

function draw(show_num) {

        var canvas_width=document.getElementById('canvas').clientWidth;

        var canvas_height=document.getElementById('canvas').clientHeight;

        var canvas = document.getElementById("canvas");//获取到canvas的对象，演员

        var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台

        canvas.width = canvas_width;

        canvas.height = canvas_height;

        var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";

        var aCode = sCode.split(",");

        var aLength = aCode.length;//获取到数组的长度

        for (var i = 0; i <= 3; i++) {

            var j = Math.floor(Math.random() * aLength);//获取到随机的索引值

            var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度

            var txt = aCode[j];//得到随机的一个内容

            show_num[i] = txt;

            var x = 10 + i * 20;//文字在canvas上的x坐标

            var y = 20 + Math.random() * 8;//文字在canvas上的y坐标

            context.font = "bold 23px 微软雅黑";

            context.translate(x, y);

            context.rotate(deg);

            context.fillStyle = randomColor();

            context.fillText(txt, 0, 0);

            context.rotate(-deg);

            context.translate(-x, -y);

        }

        for (var i = 0; i <= 5; i++) { //验证码上显示线条

            context.strokeStyle = randomColor();

            context.beginPath();

            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);

            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);

            context.stroke();

        }

        for (var i = 0; i <= 30; i++) { //验证码上显示小点

            context.strokeStyle = randomColor();

            context.beginPath();

            var x = Math.random() * canvas_width;

            var y = Math.random() * canvas_height;

            context.moveTo(x, y);

            context.lineTo(x + 1, y + 1);

            context.stroke();

        }

    }

function randomColor() {//得到随机的颜色值

        var r = Math.floor(Math.random() * 256);

        var g = Math.floor(Math.random() * 256);

        var b = Math.floor(Math.random() * 256);

        return "rgb(" + r + "," + g + "," + b + ")";

    }

</script>

</html>

												


											
canvas+js实现验证码功能的更多相关文章
	

    
								
  1. 纯JS实现图片验证码功能并兼容IE6-8
		
    最近要搞一个图片验证码功能,但是又不想自己写后台代码.于是自己准备搞一个纯前端的验证码功能,于是网上搜索了一下,找到一个插件gVerify.js,简单好用,实现完美.不过后面接到说要兼容IE8,想想也 ...
    
		
    2. 
						
  2. canvas实现验证码功能
		
    我们在做一些后台系统登录功能的时候,一般都会用到验证码,最多的就是后台生成的验证码图片返回给前端的.也可以不调用后端接口,前端使用canvas直接生成验证码. 由于功能过于简单,不需要多少代码和文字说 ...
    
		
    3. 
						
  3. 利用canvas写一个验证码小功能
		
    刚刚开始接触canvas,写个验证码小功能练练手,实现效果图如下: 主要代码如下: html <!DOCTYPE html> <html lang="en"> ...
    
		
    4. 
						
  4. 使用JS来实现验证码功能
		
    最近想为自己的Django博客添加验证码功能,本来想使用第三方库来实现的,不过考虑到添加第三方库对性能的影响,以及第三方库是否安全可靠的问题,还是用自己的代码来实现吧.反正用JS来实现验证码功能又不是 ...
    
		
    5. 
						
  5. vue实现随机验证码功能
		
    效果图: 1.html代码 <div class="form-group" style="display: flex;"> <div>  ...
    
		
    6. 
						
  6. canvas实现随机验证码
		
    canvas实现随机验证码 知识点 canvas生成背景图和文字 设置字体样式和大小 String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写 ...
    
		
    7. 
						
  7. .NET Core实战项目之CMS 第十六章 用户登录及验证码功能实现
		
    前面为了方便我们只是简单实现了基本业务功能的增删改查,但是登录功能还没有实现,而登录又是系统所必须的,得益于 ASP.NET Core的可扩展性因此我们很容易实现我们的登录功能.今天我将带着大家一起来 ...
    
		
    8. 
						
  8. MVC基本登陆与验证码功能实现
		
    一.基本登陆实现与验证码功能实现,该功能是和spring.net功能集合使用的,因为后面要用到验证是否处于登陆状态 1. 先构建一个登陆页面 @{ Layout = null; } <!DOCT ...
    
		
    9. 
						
  9. Servlet案例3：验证码功能
		
    这里介绍简单的验证码功能 动态生成图片 一个简单的页面: <!DOCTYPE html> <html> <head> <meta charset=" ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 洛谷P1029 最大公约数和最小公倍数问题 [2017年6月计划 数论02]
			
    P1029 最大公约数和最小公倍数问题 题目描述 输入二个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数 条件: 1 ...
    
			
    2. 
						
  2. golang之结构体
			
    Go 语言使用结构体和结构体成员来描述真实世界的实体和实体对应的各种属性. Go语言通过用自定义的方式形成新的类型,结构体是类型中带有成员的复合类型. Go 语言中的类型可以被实例化,使用new或&a ...
    
			
    3. 
						
  3. Hadoop 无法启动的问题
			
    最近乱搞把本来就快要挂了的hdfs又给弄坏了.问题如下, 应该是节点没有启动. [hadoop@namenode hadoop]$ hadoop dfsadmin -report Configured ...
    
			
    4. 
						
  4. 官网svn提交到代码库，但是不能同步到web目录
			
    现象:数据库名字存在,但是数据库中表为空:svn提交代码能到svn库中,但不能同步到web目录. 原因:磁盘分区满了,导致内测服务器中数据库先删掉但没能从线上拉取回来,显示数据库中表为空: 磁盘满,导 ...
    
			
    5. 
						
  5. NOIP模拟 17.8.20
			
    NOIP模拟17.8.20 A.阶乘[题目描述]亲爱的xyx同学正在研究数学与阶乘的关系,但是他喜欢颓废,于是他就制作了一个和阶乘有关系的数学游戏:给出两个整数 n,m,令 t = !n,每轮游戏的流 ...
    
			
    6. 
						
  6. Leetcode690.Employee Importance员工的重要性
			
    给定一个保存员工信息的数据结构,它包含了员工唯一的id,重要度 和 直系下属的id. 比如,员工1是员工2的领导,员工2是员工3的领导.他们相应的重要度为15, 10, 5.那么员工1的数据结构是[1 ...
    
			
    7. 
						
  7. Redis 源码学习之 Redis 事务Nosql
			
    Redis事务提供了一种将多个命令请求打包,然后一次性.按照顺序地执行多个命令的机制,并且在事务执行的期间,服务器不会中断事务而去执行其他不在事务中的命令请求,它会把事务中所有的命令都执行完毕才会去执 ...
    
			
    8. 
						
  8. 想要快速完成一个Python项目，离不开这些开源库
			
    链接:https://opensource.com/article/18/9/python-libraries-side-projects 在Python / Django世界中有一句话:我们为语言而 ...
    
			
    9. 
						
  9. MSSQL → 01：SQLServer 2008概述及安装
			
    据库的发展史 在人类诞生以来,就有记录数据的需求,在远古时代就有了结绳记事的故事,而随着科技的进步,我们记录数据的方式也发生了天翻地覆的变化,从效率低.规模小.不能适应信息高速发展的需要的手工或者简单 ...
    
			
    10. 
						
  10. Nginx教程(四) Location配置与ReWrite语法 （转）
			
    Nginx教程(四) Location配置与ReWrite语法 1 Location语法规则 1.1 Location规则 语法规则: location [=|~|~*|^~] /uri/ {… }  ...
    
			
    11.