HTML5 Canvas 验证码生成-优快云博客

本文链接：https://blog.youkuaiyun.com/black2Girl/article/details/83653986

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{text-align: center}
        canvas{border:1px solid greenyellow}
    </style>
</head>
<body>
        <h1>canvas绘制验证码</h1>
        <canvas width="120" height="40" id="c1">
        </canvas>
        <script>
            //1.新建一个函数产生随机数
            function rn(min,max){
                return  parseInt(Math.random()*(max-min)+min);
            }
            //2.新建一个函数产生随机颜色
            function rc(min,max){
                var r=rn(min,max);
                var g=rn(min,max);
                var b=rn(min,max);
                return `rgb(${r},${g},${b})`;
            }
            //3.填充背景颜色,颜色要浅一点
            var w=120;
            var h=40;
            var c1 = document.getElementById("c1");
            var ctx=c1.getContext("2d");
            ctx.fillStyle=rc(180,230);
            ctx.fillRect(0,0,w,h);
            //4.随机产生字符串
            var pool="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";
            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,-15+5,-15);
                ctx.restore();
            }
            //5.随机产生5条干扰线,干扰线的颜色要浅一点
            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();
            }
            //6.随机产生40个干扰的小点
            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();
            }
        </script>
</body>
</html>

canvas--验证码