JavaScript_验证码的实现

题目描述

使用JavaScript语言在HTML页面创建一个大小为100*30 的验证码。

要求：

    ​（1）字符集： abcdefghijkmnpqrstuvwxyABCDEFGHIJLMNOPQRSTUVWXYZ123456789

            字号为6

    ​    ​    验证码为​4个字符，RGB颜色随机范围为[0,120]

    ​（2）在[1,99]、[1,29]范围增加200个随机颜色RGB值为[50，200]的干扰点；

    ​（3）在[1,99]、[1,29]、[1,99]、[1,29]增加3条颜色RGB值为[80，220]随机的干扰线。

 解题

题目需要在HTML中创建一个canvas画布，以便实现验证码、干扰点和干扰线的实现。

但是在创建canvas画布之前需要准备好各个随机数生成的方法，这里使用Math.random方法获取1-10以内的随机数，然后进行运算获得需要范围的随机数。

首先是验证码的生成，以随机数作为数组下标的方式获取字符集内的随机字符：

function createcode() {
	code = "";
	var codeLength = 4;
	var num = [0,1,2,3,4,5,6,7,8,9,
	'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
	'S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j',
	'k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
	for(var i = 0; i < codeLength; i++) {
		var index = Math.round(Math.random() * 62);
		code += num[index];
	}
	//document.write(code);
	return code;
}

接下来是颜色的随机：

function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

function randomColor(min, max) {
  const r = randomNum(min, max);
  const g = randomNum(min, max);
  const b = randomNum(min, max);
  //document.write("rgb(" + r + ", " + g + ", " + b + ")");
  return "rgb(" + r + ", " + g + ", " + b + ")";
}

然后在HTML文件中使用canvas标签创建一个canvas画布：

    <canvas id="codeArea" width="100" height="30"></canvas>
	

建议在<canvas>标签内设置它的 width 和 height， 需要注意的是， 通过 CSS 也可以定义 canvas 的尺寸，但此元素尺寸非彼画布尺寸，在绘制时图像会伸缩以适应它的画布尺寸；如果元素尺寸和画布尺寸比例不一样，绘制出来的图像是扭曲的

 在创建canvas画布完成后，还不能直接使用，还需要使用getContext后才可以使用：

    var context = canvas.getContext("2d");
    //var "对象名" = "canvas对象名".getContext("2d");

canvas画布准备好后，需要将验证码放入canvas画布中，这里需要使用fillText(text,x,y,max)方法

text	需要添加的文字
x	text文本的x轴起始位置，类似于HTML中的absolute
y	text文本的y轴起始位置，类似于HTML中的absolute
max	可选，允许的最大文本宽度，单位px

需要注意的是，canvas画布中以左上角为坐标原点，向右为x轴，向左为y轴。

提示，需要使用font属性来定义字体和字号，并使用fillStyle属性来定义颜色。

    var canvas = document.getElementById("codeArea");
	// @ts-ignore
	var ctx = canvas.getContext("2d");
	ctx.fillStyle = "#ccc";
	ctx.fillRect(0,0,100,30);
	ctx.fillStyle = randomColor(0,255);
	ctx.font="30px Georgia";
	ctx.fillText(createcode(),16,25);

出现问题，var ctx = canvas.getContext("2d")语句中的getContext会报错：Property 'getContext' does not exist on type 'HTMLElement'. 虽然报错但是可以正常运行，暂时没有找到原因。

提示，如果创建canvas画布并且代码完全正确但画布中无任何显示，可能是HTML文件中<script>标签位置先于<canvas>标签。 

下面是干扰线和干扰点的生成，使用 beginPath(), moveTo(), lineTo(), stroke(), strokeStyle() 几个方法进行生成。beginPath和stroke起到控制开始和结束的功能，从beginPath开始到stroke结束，strokeStyle定义线条的颜色，moveTo和lineTo控制线条的起点和终点，即从坐标(x,y)到坐标(x',y'）的直线。而干扰点就是x'和y'比x和y只大1的直线（点动成线，初中老师直夸我内行）。

for(var i = 0; i < 200; i++) {
		ctx.strokeStyle = randomColor(50,200);
	    ctx.beginPath();
	    var x = Math.random() * 99;
	    var y = Math.random() * 29;
	    ctx.moveTo(x, y);
	    ctx.lineTo(x + 1, y + 1);
	    ctx.stroke();
	}
	
	for(var i = 0; i < 3; i++) {
		ctx.strokeStyle = randomColor(80,220);
        ctx.beginPath();
        ctx.moveTo(Math.random() * 99, Math.random() * 29);
        ctx.lineTo(Math.random() * 99, Math.random() * 29);
        ctx.stroke();
	}

ok，大概都梳理了一遍，下面是全部代码：

var code;

function createcode() {
	code = "";
	var codeLength = 4;
	var num = [0,1,2,3,4,5,6,7,8,9,
	'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
	'S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j',
	'k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
	for(var i = 0; i < codeLength; i++) {
		var index = Math.round(Math.random() * 62);
		code += num[index];
	}
	//document.write(code);
	return code;
}
//document.write(code);
function canvas() {
	var canvas = document.getElementById("codeArea");
	// @ts-ignore
	var ctx = canvas.getContext("2d");
	ctx.fillStyle = "#ccc";
	ctx.fillRect(0,0,100,30);
	ctx.fillStyle = randomColor(0,255);
	ctx.font="30px Georgia";
	ctx.fillText(createcode(),16,25);
	
	for(var i = 0; i < 200; i++) {
		ctx.strokeStyle = randomColor(50,200);
	    ctx.beginPath();
	    var x = Math.random() * 99;
	    var y = Math.random() * 29;
	    ctx.moveTo(x, y);
	    ctx.lineTo(x + 1, y + 1);
	    ctx.stroke();
	}
	
	for(var i = 0; i < 3; i++) {
		ctx.strokeStyle = randomColor(80,220);
        ctx.beginPath();
        ctx.moveTo(Math.random() * 99, Math.random() * 29);
        ctx.lineTo(Math.random() * 99, Math.random() * 29);
        ctx.stroke();
	}
}


function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

function randomColor(min, max) {
  const r = randomNum(min, max);
  const g = randomNum(min, max);
  const b = randomNum(min, max);
  //document.write("rgb(" + r + ", " + g + ", " + b + ")");
  return "rgb(" + r + ", " + g + ", " + b + ")";
}