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

Bertha 。 2022-05-17 04:05 210阅读 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 条评论，210人围观）

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

相关阅读

相关学习canvas画布

们可以用画布（Canvas）绘制各种图形，下面代码是绘制的一个圆形： <!DOCTYPE html> <html> <head> ...

╰半夏微凉°/ 2024年04月20日 10:51/ 0 赞/ 36 阅读

相关 canvas画布

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

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

相关利用canvas画布画哆啦A梦

简易版哆啦A梦源代码： <!DOCTYPE html> <html> <head> <title>哆啦A梦</ti

梦里梦外;/ 2022年12月01日 01:26/ 0 赞/ 250 阅读

相关纯前端生成验证码

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

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

相关利用patchca生成验证码

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关利用canvas生成海报

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

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