使用canvas绘制随机验证码

2023-01-10 11:26:53

理论基础:
掌握使用canvas绘制线条和圆形以及绘制文字
实现思路:
先构建一个画布,设置一定的宽高(在canvas中设置宽高和在style中设置是有区别的,建议直接在canvas标签中设置),封装一个生成随机数的方法,为线条和圆形的绘制设置随机的位置,既然是随机的,必然是有随机的区间,先获取画布的宽高,线条和圆的位置就是(0~画布的宽高区间)的随机位置,再定义一个随机字符,获取随机的索引值,即可生成随机的验证码。需要刷新,直接把以下代码封装在函数里,用一个事件触发即可。

源代码?

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas验证码</title>
</head>
<body>
<canvas id="code" width="80" height="30" style="border: 1px solid #ccc"></canvas>

<script src="jq/jquery-3.2.1.min.js"></script>
<script>
    var canvasW=$("#code").width();
    var canvasH=$("#code").height();
	//获取任意区间随机数
    var getRandom=function (maxNum) {
        return Math.floor(Math.random()*maxNum);
    }
	//随机颜色
    var getColor=function () {
        var r=getRandom(256),
            g=getRandom(256),
            b=getRandom(256);
        return "rgb("+[r,g,b].join(',')+")";
    }
    var ctx=$("#code")[0].getContext("2d");
    var lineNum=3,arcNum=20;

    //绘制线
    for (var i=0;i<lineNum;i++){
        ctx.beginPath();
        ctx.moveTo(getRandom(canvasW),getRandom(canvasH));
        ctx.lineTo(getRandom(canvasW),getRandom(canvasH));
        ctx.strokeStyle=getColor();
        ctx.closePath();
        ctx.stroke();
    }
    //绘制点
    for (var i=0;i<arcNum;i++){
        ctx.beginPath();
        ctx.arc(getRandom(canvasW),getRandom(canvasH),1,0,2*Math.PI);
        ctx.fillStyle=getColor();
        ctx.closePath();
        ctx.fill();
    }
    //绘制验证码
    var codeTxt="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";;
    for(var i=0;i<4;i++){
        var txt=codeTxt.split("")[getRandom(codeTxt.length)];
        //绘制验证码
        ctx.beginPath();
        ctx.font="23px 微软雅黑";
        ctx.fillStyle=getColor();
        ctx.fillText(txt,20*i,25);
        ctx.closePath();
    }
</script>
</body>
</html>

最终效果?
在这里插入图片描述

  • 作者:一只前端小白
  • 原文链接:https://blog.csdn.net/qq_38944959/article/details/88858119
    更新时间:2023-01-10 11:26:53