利用canvas制作一个随机验证码：

　　1、clearRect：context.clearRect(x,y,width,height);清空给定矩形内的指定像素

　　2、fillStyle：设置画笔的颜色

　　3、rotate(deg)：旋转角度，以弧度旋转(弧度=degrees*Math.PI/180 )

　　4、translate()： 方法重新映射画布上的位置　　

　　5、Math.random()：获取0-1之间的一个随机数，不包含1

　　

<!-- HTML -->

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>canvas随机验证码</title>

    </head>

    <body>

        <canvas id="canvas" width="100" height="40" style="border: 1px solid red;display: block;margin: 0 auto;"></canvas>

    </body>

    <script type="text/javascript">

        var myCanvas = document.querySelector("#canvas");

        var blur = myCanvas.getContext("2d");

        // 当点击画布时创建一个新的路径

        // 验证码封装

        myCanvas.onclick = function() {

            // 实现点击画布创建一个新的验证码

            blur.clearRect(0,0,100,40);

            verify();

        }

        verify();

        function verify() {

            // 绘制矩形框

            // blur.strokeRect(0,0,100,40);

            // 随机验证码

            var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "s", "t", "u",

                "v", "w", "x", "y", "z", "A", "B", "C", "D", "F", "G", "H", "I", "J", "K", "L", "S", "T", "U", "V", "W", "X", "Y",

                "Z"

            ];

            // 显示四位数的验证码

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

                var x = 20 + 20 * i;

                var y = 20 + 10 * Math.random();

                // console.log(x,y);

                // 在数组中获取到随机的索引整数

                var index = Math.floor(Math.random() * arr.length);

                // 通过随机的索引获取到随机的元素

                var texts = arr[index];

                // 设置验证码的相关样式

                blur.font = "bold 20px 微软雅黑";

                blur.fillStyle = textColor();

                // 画布旋转显示

                // translate() 方法重新映射画布上的位置

                blur.translate(x, y);

                // 将画布旋转，旋转角度，以弧度旋转(弧度=degrees*Math.PI/180 )

                var deg = 90 * Math.random() * Math.PI / 180;

                blur.rotate(deg); //

                blur.fillText(texts, 0, 0);

                // 将画布映射返回原来的位置

                blur.rotate(-deg);

                blur.translate(-x, -y);

            }

            // 制作验证码的干扰线制作

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

                blur.beginPath();

                blur.moveTo(Math.random()*100,Math.random()*40);

                blur.lineTo(Math.random()*100,Math.random()*40);

                // 设置干扰线的颜色

                blur.strokeStyle=textColor();

                blur.stroke();

            }

            // 制作验证码的干扰圆点

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

                blur.beginPath();

                var x=Math.random()*100;

                var y=Math.random()*100;

                blur.moveTo(x,y);

                blur.lineTo(x+1,y+1);

                // 设置干扰线的颜色

                blur.strokeStyle=textColor();

                blur.stroke();

            }

        }

        // 获取随机颜色封装

        function textColor(){

            var red=Math.floor(Math.random()*256);

            var green=Math.floor(Math.random()*256);

            var blue=Math.floor(Math.random()*256);

            return "rgb("+red+","+green+","+blue+")";

        }

    </script>

</html>
x 要清除的矩形左上角的 x 坐标
y 要清除的矩形左上角的 y 坐标
width 要清除的矩形的宽度，以像素计
height 要清除的矩形的高度，以像素计

JavaScript随机验证码的更多相关文章

  1. 伪验证码（含随机验证码方法）js+css

    HTML----------------------------------------------<!DOCTYPE html><html><head><m ...

  2. C#生成随机验证码例子

    C#生成随机验证码例子: 前端: <tr> <td width=" align="center" valign="top"> ...

  3. php实现动态随机验证码机制（CAPTCHA）

    php实现动态随机验证码机制 验证码(CAPTCHA)是“Completely Automated Public Turing test to tell Computers and Humans Ap ...

  4. python笔记-20 django进阶 （model与form、modelform对比，三种ajax方式的对比，随机验证码，kindeditor）

    一.model深入 1.model的功能 1.1 创建数据库表 1.2 操作数据库表 1.3 数据库的增删改查操作 2.创建数据库表的单表操作 2.1 定义表对象 class xxx(models.M ...

  5. PYTHON 随机验证码生成

    # 生成一个六位随机验证码 import random # random 生成随机数 temp = '' for i in range(6): num = random.randrange(0,6) ...

  6. Java生成随机验证码

    package com.tg.snail.core.util; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...

  7. js用正则表达式验证用户和密码的安全性，生成随机验证码

    制作了一个表单,表单验证用户.密码.随机验证码 html页面

  8. php学习笔记：利用gd库生成图片，并实现随机验证码

    说明:一些基本的代码我都进行了注释,这里实现的验证码位数.需要用的字符串都可以再设置.有我的注释,大家应该很容易能看得懂. 基本思路: 1.用mt_rand()随机生成数字确定需要获取的字符串,对字符 ...

  9. python_way,day4 内置函数（callable，chr，随机验证码，ord），装饰器

    python_way,day4 1.内置函数 - 下 制作一个随机验证码 2.装饰器 1.内置函数 - 下 callable() #对象能否被调用 chr() #10进制数字对应的ascii码表中的内 ...

随机推荐

  1. WebSphere 安装部署，发布web应用

    转: WebSphere 安装部署,发布web应用 2017年11月20日 23:51:08 greensure 阅读数 20099   版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权 ...

  2. CSS3常用属性及效果汇总

    本文转载于<https://blog.csdn.net/lyznice/article/details/54575905> 一.2D效果属性 要使用这些属性,我们需要通过 transfor ...

  3. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_7.RabbitMQ研究-工作模式-工作队列模式

    RabbitMQ有以下几种工作模式 : 1.Work queues 2.Publish/Subscribe 3.Routing 4.Topics 5.Header 6.RPC 1.Work queue ...

  4. css简单学习属性

      1:内联元素和块级元素 1).块级元素,默认是:内联元素可以变成块级元素,块级元素可以变成内联元素. <!DOCTYPE html> <html lang="en&qu ...

  5. log4net通过代码控制按分类输出

    应用场景: 比如我们系统有5个任务,每个任务都是独立的流程,按照传统的方式这些流程的数据会输出到一起,这无疑给我们排查问题增加了难度,因为我们需要的是每一个任务一个独立的输出文件,比如任务A输出到lo ...

  6. windows注册服务

    Windows服务是运行一些服务程序的较好方式(这些程序专门为各种功能提供服务,无操作界面,运行在后台),其创建方法也很简单,通过系统自带的sc命令即可方便的创建. sc命令创建Windows服务的方 ...

  7. 处理HTTP请求

    处理HTTP请求 当客户端浏览器通过URL访问web应用时,首先要做的就是获取用户提交的信息,也就是从HTTP请求数据中获得的信息.HTTP请求数据分为HTTP请求头和Body HTTP请求头包含了一 ...

  8. 深入理解channels - kavya Joshi

    From: 翻译blog地址 作者:大桥下的蜗牛 这是GopherCon 2017大会上,go开发专家 kavya Joshi 的一篇关于 channel 的演讲,讲的通俗易懂. Understand ...

  9. vue8种通信方式

    参考:https://juejin.im/post/5d267dcdf265da1b957081a3#heading-1(写的很详细)    https://blog.csdn.net/songxiu ...

  10. ffmpeg学习笔记-native原生绘制

    上次已将ffmpeg的动态库编译出来了,并且使用了ffmpeg的转码功能,成功将mp4格式视频转化为yuv视频,这篇文章基于上次测试的demo,使用surfaceview显示解码完成的像素数据 布局设 ...