在通常的登录界面我们都可以看到验证码，验证码的作用是检测是不是人在操作，防止机器等非人操作，防止数据库被轻而易举的攻破。

验证码一般用PHP和java等后端语言编写；

但是在前端，用canva或者SVG也可以绘制验证码；

让我们先来看一个简单的但是有点丑的验证码：

绘制验证码的关键点：选取的四个字符随机、字体的颜色、旋转角度随机、其中有五条线和50个随机的小点来干扰；

步骤：

画浅色背景

画随机文字

画5条干扰线

画100条干扰点（半径为1的圆）
1.新建一个函数产生随机数
//1.新建一个函数产生随机数
function rn(min,max){

    return  parseInt(Math.random()*(max-min)+min);

}
2.新建一个函数产生随机的颜色
//2.新建一个函数产生随机颜色
function rc(min,max){

    var r=rn(min,max);

    var g=rn(min,max);

    var b=rn(min,max);

    return `rgb(${r},${g},${b})`;

}
3.填充背景颜色，背景颜色要浅一点
var w=120;

var h=40;

var ctx=c1.getContext("2d");

ctx.fillStyle=rc(180,230);

ctx.fillRect(0,0,w,h);
4.随机产生字符串
//4.随机产生字符串

var pool="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";

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

    var c=pool[rn(0,pool.length)];//随机的字

    var fs=rn(18,40);//字体的大小

   var deg=rn(-30,30);//字体的旋转角度

    ctx.font=fs+'px Simhei';

    ctx.textBaseline="top";

    ctx.fillStyle=rc(80,150);

    ctx.save();

    ctx.translate(30*i+15,15);

   ctx.rotate(deg*Math.PI/180);

    ctx.fillText(c,-15+5,-15);

    ctx.restore();

}
5.随机产生5条干扰线
//5.随机产生5条干扰线,干扰线的颜色要浅一点

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

    ctx.beginPath();

    ctx.moveTo(rn(0,w),rn(0,h));

    ctx.lineTo(rn(0,w),rn(0,h));

    ctx.strokeStyle=rc(180,230);

    ctx.closePath();

    ctx.stroke();

}
6.随机产生40个干扰的小点
//6.随机产生40个干扰的小点

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

    ctx.beginPath();

    ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI);

    ctx.closePath();

    ctx.fillStyle=rc(150,200);

    ctx.fill();

}
7.完整源代码
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{text-align: center}

        canvas{border:1px solid greenyellow}

    </style>

</head>

<body>

        <h1>canvas绘制验证码</h1>

        <canvas width="120" height="40" id="c1">

        </canvas>

        <script>

            //1.新建一个函数产生随机数

            function rn(min,max){

                return  parseInt(Math.random()*(max-min)+min);

            }

            //2.新建一个函数产生随机颜色

            function rc(min,max){

                var r=rn(min,max);

                var g=rn(min,max);

                var b=rn(min,max);

                return `rgb(${r},${g},${b})`;

            }

            //3.填充背景颜色,颜色要浅一点

            var w=120;

            var h=40;

            var ctx=c1.getContext("2d");

            ctx.fillStyle=rc(180,230);

            ctx.fillRect(0,0,w,h);

            //4.随机产生字符串

            var pool="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";

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

                var c=pool[rn(0,pool.length)];//随机的字

                var fs=rn(18,40);//字体的大小

                var deg=rn(-30,30);//字体的旋转角度

                ctx.font=fs+'px Simhei';

                ctx.textBaseline="top";

                ctx.fillStyle=rc(80,150);

                ctx.save();

                ctx.translate(30*i+15,15);

                ctx.rotate(deg*Math.PI/180);

                ctx.fillText(c,-15+5,-15);

                ctx.restore();

            }

            //5.随机产生5条干扰线,干扰线的颜色要浅一点

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

                ctx.beginPath();

                ctx.moveTo(rn(0,w),rn(0,h));

                ctx.lineTo(rn(0,w),rn(0,h));

                ctx.strokeStyle=rc(180,230);

                ctx.closePath();

                ctx.stroke();

            }

            //6.随机产生40个干扰的小点

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

                ctx.beginPath();

                ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI);

                ctx.closePath();

                ctx.fillStyle=rc(150,200);

                ctx.fill();

            }

        </script>

</body>

</html>
												


											
用canvas绘制验证码的更多相关文章
	

    
								
  1. canvas 绘制验证码
		
    注意: 真正项目中验证码图片都是由服务器端(PHP.JSP.Node.js)技术来生成. 最终效果: 代码: <!DOCTYPE html> <html> <head l ...
    
		
    2. 
						
  2. canvas绘制验证码
		
    css样式: <style> body{ text-align: center; } canvas{ background:#ddd; } </style> body中添加标签 ...
    
		
    3. 
						
  3. canvas实现验证码
		
    在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写. 但是在前端,用canva或者SV ...
    
		
    4. 
						
  4. HTML5学习总结——canvas绘制象棋(canvas绘图)
		
    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
    
		
    5. 
						
  5. 用canvas绘制折线图
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    6. 
						
  6. 封装 用canvas绘制直线的函数--面向对象
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    7. 
						
  7. 通过GDI+绘制  验证码
		
    只为了记录下自己的学习历程,方便日后查看 现在开始言归正传,以下为其完整代码附上 using System; using System.Collections.Generic; using Syste ...
    
		
    8. 
						
  8. 学习笔记：HTML5 Canvas绘制简单图形
		
    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
    
		
    9. 
						
  9. canvas绘制经典折线图(一)
		
    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Task  6.2冲刺会议四    /2015-5-17
			
    今天主要是学习并熟悉了C#的开发流程,把他的文件的大体结构和每个组件之间的联系弄清楚之后.开始写服务器部分的内容.学习过程中,感觉网上的资料有些太鱼龙混杂了,不知道该怎么取舍.明天准备完善服务器的功能 ...
    
			
    2. 
						
  2. 【DL.AI】《Structuring Machine Learning Projects》笔记
			
    一.改进模型的几个方法 Collect more data Collect more diverse training set Train algorithm longer with gradient ...
    
			
    3. 
						
  3. 关于51精确延时及keil仿真延时时间
			
    转自:http://blog.sina.com.cn/s/blog_980e19e00101b5dh.html 有时候需要精确的延时,比如18B20温度传感器对时序要求非常严格,必须精确到微秒级别 一 ...
    
			
    4. 
						
  4. Few-Shot/One-Shot Learning
			
    Few-Shot/One-Shot Learning指的是小样本学习,目的是克服机器学习中训练模型需要海量数据的问题,期望通过少量数据即可获得足够的知识. Matching Networks for  ...
    
			
    5. 
						
  5. Alpha阶段敏捷冲刺③
			
    1.提供当天站立式会议照片一张. 每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 昨天已完成的工作. 界面雏形设计 数据库初步设计 完成后端框架初步构建 今天计划完成的工 ...
    
			
    6. 
						
  6. TestNG+Excel+(HTTP+JSON) 简单接口测试
			
    说明: 1.使用Exce作为数据存放地: 2.使用TestNG的Datarprovide 做数据供应: 3.不足的地方没有指定明确的result_code , error_code , ERROR_M ...
    
			
    7. 
						
  7. 基于html5的多图片上传，预览
			
    基于html5的多图片上传 本文是建立在张鑫旭大神的多文图片传的基础之上. 首先先放出来大神多图片上传的博客地址:http://www.zhangxinxu.com/wordpress/2011/09 ...
    
			
    8. 
						
  8. From 百度知道 SQLSERVER 字符集排序规则简单说明
			
    https://zhidao.baidu.com/question/390314825002277485.html 学习一下, 以后说不定用得到. collate Latin1_General_CS_ ...
    
			
    9. 
						
  9. 使用Shell脚本删除/清空日志文件
			
    话不多少,直接上代码: #!/bin/bash workdir=("/home/Tax_Punish_Ret/log_txt") #可填写多个路径, 用空格隔开 # 查找日志文件  ...
    
			
    10. 
						
  10. eclipse 导入 gradle 项目遇到 UnsupportedConfigurationException 异常
			
    异常描述: org.eclipse.buildship.core.UnsupportedConfigurationException: Project at 'D:\XXXX_workspace\XX ...
    
			
    11.