效果图如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>验证码</title>

</head>

<body>

    <canvas id="canvas"></canvas>

</body>

</html>

<script>

    class IdentifyCode {

        constructor(canvasId, width, height) {

            this.canvas = document.querySelector(`#${canvasId}`);

            this.ctx = this.canvas.getContext("2d");

            this.canvas.width = width;

            this.canvas.height = height;

            this.arrRange = [];

            this.code = "";

            this.range();

            this.buildCode();

            this.drawBakcGround();

            this.drawInterferingline();

            this.drawInterferencePoint();

            this.drawWord();

        }

        //生成一个随机数

        randomNum(min, max) {

            return parseInt(Math.random() * (max - min) + min);

        }

        //生成随机颜色

        randomColor(min, max) {

            var r = this.randomNum(min, max);

            var g = this.randomNum(min, max);

            var b = this.randomNum(min, max);

            return `rgb(${r},${g},${b})`

        }

        //生成字母和数字

        range() {

            this.arrRange = [];

            //0-9

            for (let i = "0".charCodeAt(0); i <= "9".charCodeAt(0); i++) {

                this.arrRange.push(String.fromCharCode(i))

            }

            //A-Z

            for (let i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) {

                this.arrRange.push(String.fromCharCode(i));

            }

            //a-z

            for (let i = "a".charCodeAt(0); i < "z".charCodeAt(0); i++) {

                this.arrRange.push(String.fromCharCode(i))

            }

        }

        //生成四位随机码

        buildCode() {

            var code = "";

            for (let i = 0; i < 4; i++) {

                code += this.arrRange[Math.floor(Math.random() * this.arrRange.length)]

            }

            this.code = code;

        }

        //画背景

        drawBakcGround() {

            this.ctx.fillStyle = this.randomColor(180, 230);

            this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

            this.ctx.fill()

        }

        //写字

        drawWord() {

            var bothSide = 15;//两边间距

            var letterSpace = (this.canvas.width - 2 * bothSide) / 4;

            for (var i = 0; i < 4; i++) {

                this.ctx.font = `${this.randomNum(this.canvas.width / 4, this.canvas.width / 2)}px 黑体`;

                this.ctx.fillStyle = this.randomColor(80, 150);

                this.ctx.save();

                this.ctx.translate(bothSide + letterSpace * i, this.canvas.height / 2)

                this.ctx.rotate(Math.random() * (Math.PI / 6) * (-1) ** (Math.round(Math.random())));

                this.ctx.textBaseline = "middle";

                this.ctx.fillText(this.code[i], 0, 0);

                this.ctx.restore();

            }

        }

        //画干扰线

        drawInterferingline() {

            for (var i = 0; i < 6; i++) {

                this.ctx.beginPath();

                this.ctx.moveTo(this.randomNum(0, this.canvas.width), this.randomNum(0, this.canvas.height));

                this.ctx.lineTo(this.randomNum(0, this.canvas.width), this.randomNum(0, this.canvas.height));

                this.ctx.closePath();

                this.ctx.strokeStyle = this.randomColor(180, 230);

                this.ctx.lineWidth = Math.ceil(Math.random() * 2);

                this.ctx.stroke();

            }

        }

        //画干扰点

        drawInterferencePoint() {

            var r = 1;

            var num = 40;

            for (var i = 0; i < Math.floor(num); i++) {

                this.ctx.beginPath();

                this.ctx.fillStyle = this.randomColor(150, 200);

                console.log(this.randomNum(0, this.canvas.width), this.randomNum(0, this.canvas.height), r, 0, 2 * Math.PI, true)

                this.ctx.arc(this.randomNum(0, this.canvas.width), this.randomNum(0, this.canvas.height), r, 0, 2 * Math.PI, true)

                this.ctx.fill();

                this.ctx.closePath();

            }

        }

        //更换验证码

        update() {

            this.clear();

            this.range();

            this.buildCode();

            this.drawBakcGround();

            this.drawInterferingline();

            this.drawInterferencePoint();

            this.drawWord();

        }

        //清除

        clear() {

            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)

        }

    }

    var identifyCode = new IdentifyCode("canvas", 100, 40);

    document.querySelector("#canvas").onclick = function () {

        identifyCode.update()

    }

</script>

canvas画随机的四位验证码的更多相关文章

  1. js+canvas画随机4位验证码

    啥都不说了,复制代码吧!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. canvas画随机闪烁的星星

    canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...

  3. 【重点突破】——Canvas技术绘制随机改变的验证码

    一.引言 本文主要是我在学习Canvas技术绘图时的一个小练习,绘制随机改变的验证码图片,虽然真正的项目里不这么做,但这个练习是一个掌握Canvas技术很好的综合练习.(真正的项目中验证码图片使用服务 ...

  4. canvas实现随机验证码

    canvas实现随机验证码 知识点 canvas生成背景图和文字 设置字体样式和大小 String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写 ...

  5. 用js做数字字母混合的随机四位验证码

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 樱花的季节，教大家用canvas画出飞舞的樱花树

    又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...

  7. 撩妹技能 get，教你用 canvas 画一场流星雨

    开始 妹子都喜欢流星,如果她说不喜欢,那她一定是一个假妹子. 现在就一起来做一场流星雨,用程序员的野路子浪漫一下. 要画一场流星雨,首先,自然我们要会画一颗流星. 玩过 canvas 的同学,你画圆画 ...

  8. 使用canvas及js简单生成验证码方法

    在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点.验证码生成步骤是:1.生成一张画布canvas 2.生成随机数验证码  3.在画布中生成干扰线  4.把验证码文本填充到 ...

  9. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

随机推荐

  1. A1065

    判断两数相加是否大于第三数,大于输出true,否则输出false(相等也是false) 1 需要注意数字溢出的问题: 2 先判断溢出,因为在a,b都是负数最小值的情况下,相加直接是正数,在c较小的时候 ...

  2. LTM_本地流量管理（二）

    会话保持 首先要熟悉两个概念:连接connect和会话session 连接:在四层负载均衡中,连接是最小元素. l  源端口:客户端随机产生的端口. l  源地址:发起请求的源IP地址. l  目的端 ...

  3. java 8 接口默认方法

    解决问题:在java8 之前的版本,在修改已有的接口的时候,需要修改实现该接口的实现类. 作用:解决接口的修改与现有的实现不兼容的问题.在不影响原有实现类的结构下修改新的功能方法 案例: 首先定义一个 ...

  4. django-rest-swagger 使用【转】

    转自:https://www.cnblogs.com/delav/p/10242017.html Swagger是一个API开发者的工具框架,用于生成.描述.调用和可视化RESTful风格的Web服务 ...

  5. IO 输入输出流

    1) 数据流: 一组有序,有起点和终点的字节的数据序列.包括输入流和输出流.

  6. （转载）《利用Python进行数据分析·第2版》电子书

    https://www.jianshu.com/p/04d180d90a3f https://www.jianshu.com/p/04d180d90a3f https://www.jianshu.co ...

  7. iview 父组件动态传值给子组件

    父组件 <maintenance-super :show="{'modalSuper':modalSuper,'myData':myData}" @on-close=&quo ...

  8. php versionscan YAF

    https://github.com/psecio/versionscan   Yaf 的特点: 用C语言开发的PHP框架, 相比原生的PHP, 几乎不会带来额外的性能开销. 所有的框架类, 不需要编 ...

  9. C++中让人忽视的左值和右值

    前言 为了了解C++11的新特性右值引用,不得不重新认识一下左右值.学习之初,最快的理解,莫过于望文生义了,右值那就是赋值号右边的值,左值就是赋值号左边的值.在中学的数学的学习中,我们理解的是,左值等 ...

  10. Non-local Neural Networks

    1. 摘要 卷积和循环神经网络中的操作都是一次处理一个局部邻域,在这篇文章中,作者提出了一个非局部的操作来作为捕获远程依赖的通用模块. 受计算机视觉中经典的非局部均值方法启发,我们的非局部操作计算某一 ...