canvas(学习)绘制验证码

验证码一般有服务器端生成，本次生成验证码只是为了学习canvas的用法
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--<script src="JS/jquery-3.3.1.js"></script>-->
    <script type="text/javascript">
        //获取随机颜色方法
        function GetColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")"
        }
        //页面加载事件 
        window.onload = function () {
            YZM();
        };
        //绘制验证码方法
        function YZM() {
            var canvas = document.getElementById("canvas");//获取到canvas的DOM元素
            var context = canvas.getContext("2d");//定义canvas的绘制环境
            canvas.width = 120;//设置canvas的宽度
            canvas.height = 40;//设置canvas的高度
            context.strokeRect(0, 0, 120, 40);//绘制一个矩形框
            var aCode = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'F', 'I ', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
            for (var i = 0; i < 4; i++) {
                var x = 20 + i * 20;//定义每个字符的间距
                var y = 20 + Math.random() * 10;//定义字符上下浮动
                var index = Math.floor(Math.random() * aCode.length);//向下取整数 获得aCode里面的随机索引
                var txt = aCode[index];//取出txt 
                context.font = "bold 25px 微软雅黑";//设置字体
                context.fillStyle = GetColor();//获取随机颜色
                //文字旋转 
                context.translate(x, y);//画布平移至坐标x,y
                var deg = 40 * Math.random()*(Math.random > 0.5 ? 1 : -1) * Math.PI / 180;//获取一个随机弧度值
                context.rotate(deg);//将画布旋转
                context.fillText(txt, 0, 0);//在坐标点绘制文字
                context.rotate(-deg);//将画布还原
                context.translate(-x, -y);//将画布还原
            }
            //绘制8条随机线
            for (var i = 0; i < 8; i++) {
                context.beginPath();//开始一个路径
                context.moveTo(Math.random() * 120, Math.random() * 40);//设置开始点
                context.lineTo(Math.random() * 120, Math.random() * 40);//设置结束点
                context.strokeStyle = GetColor();//随机颜色
                context.stroke();//开始绘制
            }
            for (var i = 0; i < 10; i++) {
                context.beginPath();//开始一个路径
                var x = Math.random() * 120;//定义点的x坐标
                var y = Math.random() * 40;//定义点的y坐标
                context.moveTo(x, y);//开始点移动至坐标点
                context.fillStyle = GetColor();//获取随机颜色
                context.fillText("·", x, y);//开始绘制
            }
        };
    </script>
</head>
<body>
    <canvas id="canvas">您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <a  href="#" onclick="YZM()">再试一次</a>
</body>
</html>
canvas(学习)绘制验证码

猜你喜欢
