效果图如下：

<!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. jmeter测试https请求之导入证书

    jmeter测试https请求   公司最近在搞全站HTTPS改造,进一步提高网站的安全性,防止运营商劫持.那么,改造完成后,所有前后端的URL将全部为https. So ,研究下怎么用Jmeter访 ...

  2. MIF文件生成说明

    mif文件就是存储器初始化文件,即memory initialization file,用来配置RAM或ROM中的数据.生成QuartusII11.0可用的mif文件,有如下几种方式: 方法1:利用Q ...

  3. [luogu]P1066 2^k进制数[数学][递推][高精度]

    [luogu]P1066 2^k进制数 题目描述 设r是个2^k 进制数,并满足以下条件: (1)r至少是个2位的2^k 进制数. (2)作为2^k 进制数,除最后一位外,r的每一位严格小于它右边相邻 ...

  4. codeforces 682C

    鸽了两天,还是我太蒟了,mayan游戏调不出来,难题又不会,只有刷水DFS才能勉强维持一下生计这样子,我还是要提高姿势水平啊! 题目描述: 给定一棵树,每条边有边权,每个点有点权,如果某个点到其子节点 ...

  5. [ZJU 1010] Area

    ZOJ Problem Set - 1010 Area Time Limit: 2 Seconds      Memory Limit: 65536 KB      Special Judge Jer ...

  6. scanf() 与 gets()--转载

    scanf( )函数和gets( )函数都可用于输入字符串,但在功能上有区别.若想从键盘上输入字符串"hi hello",则应该使用__gets__函数. gets可以接收空格:而 ...

  7. pandas中的describe方法

  8. permutation 2

    permutation 2 猜了发结论过了== $N$个数的全排列,$p_{1}=x,p_{2}=y$要求$|p_{i+1}-p_{i}|<=2|$求满足条件的排列个数. 首先考虑$x=1,y= ...

  9. <<Effective Java>> 第四十三条

    <<Effective Java>> 第四十三条:返回零长度的数组或者集合,而不是null 如果一个方法的返回值类型是集合或者数组 ,如果在方法内部需要返回的集合或者数组是零长 ...

  10. Denali NAND FLASH控制器的验证

    NAND FLASH的结构如图所示: Denali NAND FLASH控制器模块提供了从AHB总线到外部NAND FLASH存储器芯片IO管脚的访问功能.主要技术特性包括: 1.标准32位AHB总线 ...