canvas+js随机生成验证码

转载 2018年04月15日 20:32:10
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="apple-mobile-web-app-capable" content="yes"> 
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="full-screen" content="yes">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<title>Document</title>
</head>
<body>
	<canvas id="mycanvas" width="120" height="30"></canvas>
	<script type="text/javascript">
		var can = document.getElementById("mycanvas");
		var ctx = can.getContext("2d");
		ctx.fillStyle = randColor(170,250); 
		ctx.fillRect(0,0,120,30);
		draw();

		can.onclick=function() {
			ctx.clearRect(0,0,120,30);
			draw();
		}
		function draw(){
			ctx.fillStyle=randColor(170,250); 
			ctx.fillRect(0,0,120,30);
			var data = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890';
			for(var i=0;i<=90;i+=30){
				var c = data[randNun(0,data.length-1)];
				ctx.fillStyle = randColor(60,160);
				ctx.font = randNun(15,40)+'px SimHei';
				ctx.fillText(c,i+randNun(0,15),randNun(15,30))
			}
			//	绘制干扰线
			for(var i=0;i<10;i++){
				ctx.beginPath();
				ctx.moveTo(randNun(0,120),randNun(0,120))
				ctx.lineTo(randNun(0,120),randNun(0,120))
				ctx.strokeStyle=randColor(60,160)
				ctx.stroke();
			}
			// 绘制干扰点
			for(var i=0;i<10;i++){
				ctx.beginPath();
				ctx.arc(randNun(0,120),randNun(0,30),randNun(1,4),0,2*Math.PI)
				ctx.strokeStyle=randColor(60,160);
				ctx.stroke();
			}
		}

		function randColor(min,max){
			var r=Math.floor(Math.random()*(max-min+1)+min); //[0,max-min)+min==>>[min,max)
			var g=Math.floor(Math.random()*(max-min+1)+min);
			var b=Math.floor(Math.random()*(max-min+1)+min);
			return 'rgb('+r+','+g+','+b+')';
		}
		function randNun(min,max){
			var num = Math.floor(Math.random()*(max-min+1)+min)
			return num
		}
	</script>
</body>
</html>

java生成随机验证码(ASCII)

最近做的一些东西,在做请求时,要伪造一些随机码,所以就写了个方法,网上实现也比较多,这里只是提供自己的这个相对来说比较简单,主要是看实现思路,主要是利用java的 Random类 1. 只生成数...
  • zml_2015
  • zml_2015
  • 2017-08-16 11:56:56
  • 948

Java 生成6位随机验证码

一看就懂的东西,赶紧复制使用吧。public String getRandNum(int charCount) { String charValue = ""; for...
  • u013410747
  • u013410747
  • 2015-11-19 14:01:19
  • 2091

js随机生成一个验证码

之前接触过的验证码都是图片,今天碰到了一个用js生成随机验证码的demo,拿来敲一敲和大家分享...
  • AmberWu
  • AmberWu
  • 2017-05-31 19:26:27
  • 1794

随机产生六位验证码

import java.util.*; public class SecurityCode { /* 程序实现的是打印出6位验证码有字符有数字交替出现 */ static String ...
  • woshiermingerming
  • woshiermingerming
  • 2016-08-18 11:39:14
  • 1273

Java随机生成动态验证码程序

  • 2009年05月13日 15:40
  • 64KB
  • 下载

java如何随机生成6位数的验证码

java如何随机生成6位数的验证码
  • DreamTL
  • DreamTL
  • 2016-08-04 16:43:08
  • 21199

Java随机生成验证码

/**  *   * @author Renault_zjl  * @param length 你所需要验证码的长度  * @param type   所需验证码里面的类型  * @retu...
  • u010763162
  • u010763162
  • 2015-12-26 13:00:39
  • 387

ASP.Net随机生成验证码

//首先创建一个页面ValidateCodePage: //创建Random的实例 Random rand=new Random(); protected void Page_Load(obje...
  • bingxueer0702
  • bingxueer0702
  • 2013-01-24 18:16:32
  • 1392

C#随机生成验证码方法

using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using S...
  • Denghejing
  • Denghejing
  • 2016-07-10 15:40:37
  • 4115

Java工具类——随机验证码RandNumberUtils

在平常的web开发当中我们经常用到验证码,但是关于如何产生指定位数的验证码一直没有深入的去了解,都是要用的时候就去写。在上一次开发当中我就将这个经验用到的产生随机数的方法进行了封装,提供一个公共的方法...
  • chencong3139
  • chencong3139
  • 2017-06-18 18:57:28
  • 973
收藏助手
不良信息举报
您举报文章:canvas+js随机生成验证码
举报原因:
原因补充:

(最多只允许输入30个字)