制作验证码

最新推荐文章于 2023-03-30 15:25:51 发布

Xyp9x.

最新推荐文章于 2023-03-30 15:25:51 发布

阅读量418

点赞数 3

文章标签： canvas javascript html5

本文链接：https://blog.csdn.net/weixin_44701229/article/details/103704170

版权

制作验证码

验证码实际效果展示入口

验证码需要三个部分：
1. 画入50个随机位置的圆点
2. 画入5条随机位置和长度的线段
3. 画入4个随机字内容、颜色、大小、旋转度数的字，字的范畴为数字或者字母

大致步骤为
先写出一个存放所有数的数组，写出需要随机数的函数，再后面随机的值时好方便使用。先用for循环画50个圆点，再写入线段，最后写入4个字赋予样式。

注意每次都要写在下列4个方法内，因为及可以有效的区分写的位置也可以让每次改变的原点之前的原点保存不会因此改变。

	context.save();
	context.beginPath();
	
	context.restore();
	context.closePath();

还需注意在字体的旋转时候旋转原地尽量选在字体那个位置的中间这样就不会跑出画布。

html

<style>
        div{
           text-align: center;
            margin: auto;
            margin-top: 200px;
        }
        a{
          color: blue;
          cursor: pointer;  
        }
        a:hover{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 2.使用canvas绘制一个随机可以改变的验证码图片
	随机字母或数字（出去容易混淆的），4位，大小随机，颜色随机（最好是深色）旋转角度随机
	画布背景颜色随机（浅色）
	5条随机干扰线（深色），处在文字的上方
    50个杂色点（半径为1的圆），处在文字上方 -->
    <div>
        <canvas width="400px" height="120px" id="canvas"></canvas>
    <a id="changecanvas">看不清换一张</a>
    </div>

javascript

var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var changecanvas = document.getElementById("changecanvas");

canvaspic();
//看不清换一张的点击事件
changecanvas.onclick = function () {
 canvaspic();
}

function canvaspic() {
	 context.clearRect(0, 0, 400, 120);
	 var str = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXWZ";
	 var arr = str.split("");
	
	 function size() {
	     var n = parseInt(Math.random() * 40) + 40;
	     return n
	 }
	
	 function color() {
	     var n = parseInt(Math.random() * 256);
	     return n
	 }
	
	 function num() {
	     var n = parseInt(Math.random() * 62);
	     return n
	 }
	
	 function round() {
	     var n = parseInt(Math.random() * 360);
	     return n
	 }
	
	 function linewidth() {
	     var n = parseInt(Math.random() * 6);
	     return n
	 }
	
	 function lineX() {
	     var n = parseInt(Math.random() * 400);
	     return n
	 }
	
	 function lineY() {
	     var n = parseInt(Math.random() * 120);
	     return n
	 }
	
	 canvas.style.backgroundColor = 'rgb(' + color() + ',' + color() + ',' + color() + ')';
	 //画入50个小圆点
	 for (let i = 0; i < 50; i++) {
	     context.beginPath();
	     context.fillStyle = '#DCDCDC';
	     context.arc(lineX(), lineY(), 2, 0, Math.PI / 180 * 360);
	     context.fill();
	     context.closePath();
	 }
	 //画入5条不规则的线
	 for (let i = 0; i < 5; i++) {
	     context.save();
	     context.beginPath();
	     context.linewidth = linewidth();
	     context.moveTo(lineX(), lineY());
	     context.lineTo(lineX(), lineY());
	     context.strokeStyle = 'black';
	     context.stroke();
	     context.translate(350, 60);
	     context.rotate(Math.PI / 180 * round());
	     context.restore();
	     context.closePath();
	 }
	 //写入第一个字
	 context.save();
	 context.font = size() + "px 宋体";
	 context.fillStyle = 'rgb(' + color() + ',' + color() + ',' + color() + ')';
	 context.translate(50, 60);
	 context.rotate(Math.PI / 180 * round());
	 context.fillText(arr[num()], -25, 10);
	 context.restore();
	 //写入第二个字
	 context.save()
	 context.font = size() + "px 宋体";
	 context.fillStyle = 'rgb(' + color() + ',' + color() + ',' + color() + ')';
	 context.translate(150, 60);
	 context.rotate(Math.PI / 180 * round());
	 context.fillText(arr[num()], -25, 10);
	 context.restore();
	 //写入第三个字
	 context.save()
	 context.font = size() + "px 宋体";
	 context.fillStyle = 'rgb(' + color() + ',' + color() + ',' + color() + ')';
	 context.translate(250, 60);
	 context.rotate(Math.PI / 180 * round());
	 context.fillText(arr[num()], -25, 10);
	 context.restore();
	 //写入第四个字
	 context.save()
	 context.font = size() + "px 宋体";
	 context.fillStyle = 'rgb(' + color() + ',' + color() + ',' + color() + ')';
	 context.translate(350, 60);
	 context.rotate(Math.PI / 180 * round());
	 context.fillText(arr[num()], -25, 10);
	 context.restore();
}

end ~

Xyp9x.

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
制作验证码

制作验证码验证码实际效果展示入口验证码需要三个部分：1. 画入50个随机位置的圆点2. 画入5条随机位置和长度的线段3. 画入4个随机字内容、颜色、大小、旋转度数的字，字的范畴为数字或者字母大致步骤为先写出一个存放所有数的数组，写出需要随机数的函数，再后面随机的值时好方便使用。先用for循环画50个圆点，再写入线段，最后写入4个字赋予样式。注意每次都要写在下列4个方法内，因为及可以...
复制链接

扫一扫