js实现用户输入生成验证码+随机线条

最新推荐文章于 2021-03-19 08:40:43 发布

wangmumu_123

最新推荐文章于 2021-03-19 08:40:43 发布

阅读量816

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_38436939/article/details/84570092

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html>

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript">
			function $(id) {
				return document.getElementById(id);
			}

			function textToImg() {
				var maxlen = 6; //设置最大长度
				var len = 0; //输入的字符长度
				var i = 0;
				var fontSize = $('fontSize').value || 20;
				var fontWeight = $('fontWeight').value || 'normal';
				var txt = $("txt").value;
				var canvas = $('canvas');
				if(txt == '') {
					alert('请输入文字！');
					$("txt").focus();
					return null;
				}
				//输入框输入字符超过最大长度
				if(maxlen < txt.length) {
					alert('您的输入长度超过限定值！');
					$("txt").focus();
					return null;
				}
				len = txt.length;
				canvas.width = fontSize * len;
				canvas.height = fontSize * (3 / 2) *
					(Math.ceil(txt.length / len) + txt.split('\n').length - 1);
				var context = canvas.getContext('2d');
				//使用颜色渐变
				var my_gradient=context.createLinearGradient(0,0,0,canvas.height);
				//设置最后生成字体的渐变色
				var red = $("red");
				var green = $("green");
				var blue = $("blue");
				my_gradient.addColorStop(0,"rgb(" + red.value + "," + green.value + "," +
					blue.value + ")");
				my_gradient.addColorStop(1,"rgb(" + bgred.value + "," + bggreen.value + "," +
					bgblue.value + ")");
				context.fillStyle = my_gradient;
//				context.fillStyle = $("showcolor").innerHTML;
				context.font = fontWeight + ' ' + fontSize + 'px sans-serif';
				context.textBaseline = 'top';
				canvas.style.display = 'none';
				var txtArray = txt.split('');
				for(var k = 0; k < txtArray.length; k++) {
					//将初始状态保存
					context.save();
					//获得-1到1的随机数
					var rA = 1 - Math.random() * 2;
					//获取随机倾斜角
					var angle = rA / 8;
					var s = txtArray[k];
					//旋转生成的随机字符
					context.rotate(angle);
					var s = txtArray[k];
					context.fillText(s, fontSize * k, fontSize * (3 / 2) * i, canvas.width);
					//恢复初始状态，以便下一次循环
					context.restore();
				}
//				context.fillText(txt, 0, fontSize * (3 / 2) * i, canvas.width);
				//生成干扰线，数量随意
				for(var i = 0; i < 10; i++) {
					drawline(canvas, context);
				}
				var img = $("img");
				img.src = canvas.toDataURL("image/png");
			}
			//改变字体及线条颜色
			function changeColor() {
				var c = $("textColor");
				var ctx = c.getContext("2d");
				var red = $("red");
				var green = $("green");
				var blue = $("blue");
				ctx.fillStyle = "rgb(" + red.value + "," + green.value + "," +
					blue.value + ")";
				$("showcolor").innerHTML = ctx.fillStyle;
				ctx.fillRect(0, 0, 100, 100);

				var bgC = $("bgColor");
				var bgCtx = bgC.getContext("2d");
				var bgred = $("bgred");
				var bggreen = $("bggreen");
				var bgblue = $("bgblue");
				bgCtx.fillStyle = "rgb(" + bgred.value + "," + bggreen.value + "," +
					bgblue.value + ")";
				$("showbgcolor").innerHTML = bgCtx.fillStyle;
				bgCtx.fillRect(0, 0, 100, 100);
			}
			/*随机干扰线条函数*/
			function drawline(canvas, context) {
				//若省略beginPath，则每点击一次验证码会累积干扰线的条数
				context.beginPath();
				//起点与终点在canvas宽高内随机
				context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));
				context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));
				context.lineWidth = 1;
				context.strokeStyle = $("showbgcolor").innerHTML;
				context.stroke();
			}
		</script>
	</head>

	<body>
		<div>
			<input id="txt" style="width: 150px; height: 20px;" placeholder="输入不能超过6个字符"></input>
			<button onclick="textToImg()">生成图片</button>
			<img id="img" style="border: 1px solid;margin-left: 20px;" />
		</div>
		<div style="float: left;">
			<h4>字体设置:</h2>
			<label>字体大小:</label><input size="4" id='fontSize' value='20' />px
			<br /><br />
			<label style="padding-top: 50px;">字体精细:</label>
			<select id="fontWeight">
				<option value="normal">正常</option>
				<option value="bold">粗</option>
			</select>
		</div>
		<div style="float: left;">
			<h4>字体颜色：</h2>
			<canvas id="textColor" width="100" height="20"></canvas>
			<p>Red： <input type="range" id="red" min="0" max="255" value="0" onchange="changeColor();" /></p>
			<p>Green：<input type="range" id="green" min="0" max="255" value="0" onchange="changeColor();" /></p>
			<p>Blue： <input type="range" id="blue" min="0" max="255" value="0" onchange="changeColor();" /></p>
			目前的颜色:<span id="showcolor"></span>
		</div>
		<div>
			<h4>背景颜色：</h2>
			<canvas id="bgColor" width="100" height="20"></canvas>
			<p>Red： <input type="range" id="bgred" min="0" max="255" value="0" onchange="changeColor();" /></p>
			<p>Green：<input type="range" id="bggreen" min="0" max="255" value="0" onchange="changeColor();" /></p>
			<p>Blue： <input type="range" id="bgblue" min="0" max="255" value="0" onchange="changeColor();" /></p>
			目前的颜色:<span id="showbgcolor"></span>
		</div>
		<canvas id="canvas" style="display:block;"></canvas>
	</body>

</html>

wangmumu_123

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现用户输入生成验证码+随机线条

&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script type="text/javascript"&gt; function $(id) { return document.getElementById(id); } function textToImg() { var ...
复制链接

扫一扫