HTML——canvas生成验证码<canvas>用于图形的绘制，它只是图形容器，必须通过JS来绘制图形。

一、关于canvas

<canvas>用于图形的绘制，它只是图形容器，必须通过JS来绘制图形。

<canvas id="demo" width="100" height="100"></canvas>

使用JS绘制图像

var c=document.getElementById("demo"); //找到demo

var ctx=c.getContext("2d"); //创建context对象

ctx.fillStyle="#FF0000"; //样式

ctx.fillRect(0,0,150,75); //形状、位置、尺寸

二、canvas生成验证码思路

①随机生成函数

②随机生成颜色的函数

③在canvas上绘制背景颜色

④随机字符串

⑤取出随机的字母或数字

⑥随机字体大小

⑦随机字母数字的旋转角度

⑧设置字体的填充颜色

⑨随机生成干扰线

⑩随机产生4个小的干扰圆点

三、代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id='canvas' width='120' height='40'>
		<script>
			function YZM(selector,w,h){
				function rn(min,max){
					return parseInt(Math.random()*(max-min)+min)
				}
				
				function rc(min,max){
					var r = rn(min,max);
					var g = rn(min,max);
					var b = rn(min,max);
					return `rgb(${r},${g},${b})`
				}
				
				var w = w;
				var h = h;
				var canvas = document.querySelector(selector);
				var ctx = canvas.getContext('2d')
				ctx.fillStyle = rc(180,230)
				ctx.fillRect(0,0,w,h)
				
				var pool = 'ABCDEFGHIJKLIMNOPQRSTUVWXYZ0123456789'
				var result = ''
				
				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,-10,-10);
					ctx.restore()
					result+=c;
					console.log(c);
				}
				
				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()
				}
				
				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()
				}
				return result
			}
			
			let yzm = YZM('canvas',120,40)
			console.log(yzm)
		</script>
	</body>
</html>