前端利用canvas画布生成验证码

Bertha 。 2022-05-17 04:05 250阅读 0赞

直接贴代码  
js部分

function randomRgbColor() {  //随机生成RGB颜色
                var r = Math.floor(Math.random() * 256); //随机生成256以内r值
                var g = Math.floor(Math.random() * 256); //随机生成256以内g值
                var b = Math.floor(Math.random() * 256); //随机生成256以内b值
                return "rgb(" + r + "," + g + "," + b + ")"; //返回rgb(r,g,b)格式颜色
            }
            window.onload = function () { 
                draw();
                document.getElementById("changeImg").onclick=function(){ 
                    draw();
                }
            }
    
            function draw(){ 
                var canvas = document.getElementById("canvas");
                var context = canvas.getContext("2d");
                canvas.width = 120;
                canvas.height = 40;
                context.strokeRect(0, 0, 120, 40);
                var aCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,1,2,3,4,5,6,7,8,9";
                console.log(aCode.split(","));
                var aLength = aCode.split(",").length;
                for (var i = 0; i <= 3; i++) {
                    var x = 20 + i * 20;
                    var y = 20 + Math.random() * 10;
                    var j = Math.floor(Math.random() * aLength);
                    var deg = Math.random() * 90 * Math.PI / 180;//随机弧度
                    var txt = aCode.split(",")[j];
                    context.fillStyle = randomRgbColor();
                    context.font = "bold 20px 微软雅黑";
                    //修改坐标原点和旋转角度
                    context.translate(x, y);
                    context.rotate(deg);
                    context.fillText(txt, 0, 0);
                    //恢复坐标原点和旋转角度
                    context.rotate(-deg);
                    context.translate(-x, -y);
                }
                //干扰线
                for (var i = 0; i < 8; i++) {
                    context.strokeStyle = randomRgbColor();
                    context.beginPath();
                    context.moveTo(Math.random() * 120, Math.random() * 40);
                    context.lineTo(Math.random() * 120, Math.random() * 40);
                    context.stroke();
                }
                /**绘制干扰点**/
                for (var i = 0; i < 20; i++) {
                    context.fillStyle = randomRgbColor();
                    context.beginPath();
                    context.arc(Math.random() * 120, Math.random() * 40, 1, 0, 2 * Math.PI);
                    context.fill();
                }
            }

html部分

<canvas id="canvas"></canvas>
     <a href="javascript:;" id="changeImg">再换一张</a>

不知道为什么不能上传图片了，请自行测试。

发表评论取消回复

表情：

评论列表（有 0 条评论，250人围观）

还没有评论，来说两句吧...

相关阅读

相关利用python生成随机验证码

1 问题在日常的手机使用上，我们通常会遇到软件或app的登录需要用到验证码的情况。这种方法有效地保障了账号的安全性。那么能否用python来实现验证码的随机生成呢？ 2

本是古典何须时尚/ 2024年02月17日 13:15/ 0 赞/ 48 阅读

相关 canvas画布

canvas标签 <canvas></canvas> 接下来使用支持H5的浏览器打开该页面，将会看到如下内容： ![在这里插入图片描述][watermark

系统管理员/ 2023年08月17日 16:25/ 0 赞/ 127 阅读

相关 canvas-画布

概述 HTML5 的 canvas 元素用于定义画布，是一个矩形区域，默认颜色为白色，默认大小为 300 \ 150；通过 JavaScript 可以在该区域上绘制图像

浅浅的花香味﹌/ 2023年06月16日 08:23/ 0 赞/ 24 阅读

相关纯前端生成验证码

纯前端生成验证码生成验证码的方法： function code_draw() { var canvas_width = $('ca

ゝ一世哀愁。/ 2022年10月12日 15:58/ 0 赞/ 194 阅读

相关利用patchca生成验证码

patchca 是一个简单但功能强大的验证码的Java类库。在springMVC 中的使用 / 验证码

你的名字/ 2022年09月30日 00:55/ 0 赞/ 164 阅读

相关利用java自动生成验证码

验证码生成有两种形式，一种是保存一定的验证码图片在数据库中然后把相应的验证码也保存起来。通过查询数据库来确定用户输入的验证码是否正确。但是这种方式有很大的问题，

迷南。/ 2022年08月21日 12:40/ 0 赞/ 171 阅读

相关最简单的验证码（利用JSP生成验证码）

可以直接利用jsp输出验证码。jsp文件如下： <%@ page contentType="image/jpeg" import="java.awt.,

忘是亡心i/ 2022年07月17日 03:27/ 0 赞/ 188 阅读

相关利用PIL生成随机验证码

import os from django.test import TestCase from django.conf import settings

电玩女神/ 2022年05月23日 10:51/ 0 赞/ 203 阅读

相关前端利用canvas画布生成验证码

直接贴代码 js部分 function randomRgbColor() { //随机生成RGB颜色 var r = Math.

Bertha 。/ 2022年05月17日 04:05/ 0 赞/ 251 阅读

相关利用canvas生成海报

准备准备两张图片连接，最好是自己开发账号验证的https图片链接。实现思路其实就是canvas实现方式，首先要就是定义一个canvas容器，把容器放在中间，

ゞ浴缸里的玫瑰/ 2022年01月10日 07:07/ 0 赞/ 608 阅读