转载自：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. 【weex】publishTask
			
    这个小项目还挺有意思的,是一个效果取快递的项目 我们看下效果 放博客的github地址:https://github.com/xiaomaer/publishTask 我们来看下代码,这几个页面运行的 ...
    
			
    2. 
						
  2. Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli）
			
    ps: 想了解更多vue相关知识请点击VUE学习目录汇总 Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过 ...
    
			
    3. 
						
  3. 洛谷3953 (NOIp2017) 逛公园——记忆化搜索+用栈判0环
			
    题目:https://www.luogu.org/problemnew/show/P3953 因为K只有50,所以想到用dp[ cr ][ j ]表示在点cr.比最短路多走了 j 的方案数.(看了TJ ...
    
			
    4. 
						
  4. Hdu 1498　二分匹配
			
    50 years, 50 colors Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...
    
			
    5. 
						
  5. 2017年2月27日Unicorn,　US (148) and China (69), followed by the U.K. (10), India (9), Israel (5) and Germany (5).
			
    Revisiting The Unicorn Club Get to know the newest crowd of billion dollar startups In 2013, when Ai ...
    
			
    6. 
						
  6. js中保存成图片并下载
			
    1.保存canvas中绘制的内容为图片 HTML代码: <canvas id="canvas" width="400" height="400& ...
    
			
    7. 
						
  7. HttpClient实现远程调用
			
           在项目中,我们常常遇到远程调用的问题,一个模块总是无法单独存在,总需要调用第三方或者其他模块的接口.这里我们就涉及到了远程调用. 原来在 ITOO中,我们是通过使用EJB来实现远程调用的 ...
    
			
    8. 
						
  8. 洛谷 P3434 [POI2006]KRA-The Disks 贪心
			
    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输出样例 输出样例 说明 思路 AC代码 题面 题目链接 P3434 [POI2006]KRA-The Disks 题目 ...
    
			
    9. 
						
  9. pytest   fixture中scope试验，包含function、module、class、session、package
			
    上图是试验的目录结构 conftest.py:存放pytest fixture的文件 import uuid import pytest @pytest.fixture(scope="mod ...
    
			
    10. 
						
  10. Leetcode819.Most Common Word最常见的单词
			
    给定一个段落 (paragraph) 和一个禁用单词列表 (banned).返回出现次数最多,同时不在禁用列表中的单词.题目保证至少有一个词不在禁用列表中,而且答案唯一. 禁用列表中的单词用小写字母表 ...
    
			
    11.