啥都不说了，复制代码吧！！！

<!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>Document</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(0,255);

         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;

        // console.log(letterSpace);

         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(100, 200);

             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<4; 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(0, 255);

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

             this.ctx.stroke();

         }

     }

     //画干扰点

     drawInterferencePoint(){

         var r = 4;

         var num = this.canvas.width*this.canvas.width / 1000;

        //  console.log(num)

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

             this.ctx.beginPath();

             this.ctx.fillStyle = this.randomColor(0,255);

             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>

js+canvas画随机4位验证码的更多相关文章

  1. js 做的随机8位验证码

    开发思路: 画出放置验证码的模块.一个写有“看不清…”的小块,以及输入验证码的文本框 获取各个模块 封装一个函数Yan_ma(),设置验证码为8位,里面含有数字,小写字母,小写字母和中文.每种类型出现 ...

  2. canvas画随机的四位验证码

    效果图如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  3. canvas画随机闪烁的星星

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

  4. js canvas画柱状图 没什么高端的 就是一篇偶尔思路的

    公司项目要用js画柱状图,本来想用个插件吧 chart.js 忽然一想 我们也用不了那么大的插件.自己写个吧,也能看看自己那点数学水平能够不! 有几个小亮点吧 1.函数x 和 函数y 对坐标进行了转化 ...

  5. [Python]random生成随机6位验证码

    #!/usr/bin/env pyhton # coding:utf-8 # @Time : 2020-02-16 10:07 # @Author : LeoShi # @Site : # @File ...

  6. canvas实现随机验证码

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

  7. canvas制作随机验证码

    看到人家彩色背景的验证码想测试一下: 创建html代码: <canvas id="myCanvas" width="200" height="1 ...

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

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

  9. ！JS实战之随机像素图

    JavaScript实例分享之----画随机像素图.随机像素图(作者自己取得名字)指的是一张图片上每一个像素的颜色都是随机的.此时应该能联想到这幅图多么眼花缭乱,好吧,我们用JS来实现它的原因是JS很 ...

随机推荐

  1. 手把手教你使用Python网络爬虫获取招聘信息

    1.前言 现在在疫情阶段,想找一份不错的工作变得更为困难,很多人会选择去网上看招聘信息.可是招聘信息有一些是错综复杂的.而且不能把全部的信息全部罗列出来,以外卖的58招聘网站来看,资料整理的不清晰. ...

  2. MySql实现 split

    substring_index(str,delim,count)       str:要处理的字符串       delim:分隔符       count:计数 例子:str=www.baidu.c ...

  3. Vue组件注册

    全局注册方法 Vue.component('my-component-name', { // ... 选项 ... }) Vue.component('component-a', { /* ... * ...

  4. XCTF-WEB-高手进阶区-Web_python_template_injection-笔记

    Web_python_template_injection o(╥﹏╥)o从这里开始题目就变得有点诡谲了 网上搜索相关教程的确是一知半解,大概参考了如下和最后的WP: http://shaobaoba ...

  5. OpenCV之高斯平滑（Python实现）

    假设一个列数为W,行数为H的高斯卷计算子gaussKernel,其中W,H均为奇数,描点位置在((H-1)/2 ,(W-1)/2),构建高斯卷积核的步骤如下 1.计算高斯矩阵 \[gaussMatri ...

  6. C++实现二叉树的链接存储结构（先根、中根和后根遍历）

    验证二叉树的链接存储结构及其上的基本操作. [实验要求]: 1. 从文件创建一棵二叉树,并对其初始化: 2. 先根.中根.后根遍历二叉树: 3. 在二叉树中搜索给定结点的父结点: 4. 搜索二叉树中符 ...

  7. python新添加excel数据

    相关库 import os import xlwt from xlrd import open_workbook from xlutils.copy import copy 1.判断是否存在xls文件 ...

  8. Mybatis-09-缓存

    缓存 什么是缓存[Cache]? 存在内存中的临时数据 提高查询效率,解决高并发的性能问题 为什么使用缓存? 减少和数据库的交互次数,减少系统开销,提高系统效率 什么样的数据能使用缓存? 经常查询且不 ...

  9. Python+Pytest+Allure+Git+Jenkins接口自动化框架

    Python+Pytest+Allure+Git+Jenkins接口自动化框架 一.接口基础 接口测试是对系统和组件之间的接口进行测试,主要是效验数据的交换,传递和控制管理过程,以及相互逻辑依赖关系. ...

  10. 【SCOI2013】摩托车交易 - 最大生成树+树链剖分

    题目描述 mzry1992 在打完吊针出院之后,买了辆新摩托车,开始了在周边城市的黄金运送生意.在mzry1992 生活的地方,城市之间是用双向高速公路连接的.另外,每条高速公路有一个载重上限,即在不 ...