canvas生成随机（颜色位置）验证码

一、什么是canvas？

1.HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。

2.<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

3.你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

4.canvasc初始宽高300,150

二.功能实现

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

①功能需求：

1.需要的内容：字母数字组合(长度随机5-7,颜色随机,位置随机，大小随机);出现一些干扰信息(线条,圆)。

2.简单实现一下验证。

②代码部分：

1.html+css代码

    <div class="yzm">验证码:</div><canvas width="100" height="50"></canvas><input type="text"><button>验证</button><div class="trun1">验证成功</div><div class="false1">验证失败</div>

  canvas {background-color: #eee;position: relative;top: 20px;left: 300px;border: 1px solid;}input {width: 180px;height: 35px;font-size: 20px;}button {position: absolute;top: 29px;left: 416px;width: 80px;height: 50px;font-size: 20px;}.yzm {position: absolute;top: 35px;left: 30px;font-size: 26px;}.trun1{background-color:aqua;width: 189px;height: 20px;text-align: center;position: absolute;left: 115px;display: none;}.false1{background-color:red;width: 189px;height: 20px;text-align: center;position: absolute;left: 115px;display: none;}

2.js代码

var mixin = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNIPQRSTUVWXYZ"// 获取画布var canvas = document.getElementsByTagName('canvas')[0];//获取画笔var ctx = canvas.getContext('2d');//用来存储验证码var verify=""//随机验证码的个数var random = parseInt(getRandom(5, 5));// 用来控制验证码出现的位置var offx = 0;for (var i = 0; i < random; i++) {//入栈，保存之前画布的设置ctx.save()var text = texts();//随机字体的大小ctx.font = `${getRandom(15, 30)}px 楷体`// 随机字体的颜色ctx.fillStyle = `${getRandomColor()}`// ctx.rotate(Math.PI/180*30);//基线//控制文字的倾斜if(i%2){ctx.rotate(Math.PI/180*10)}else{ctx.rotate(-Math.PI/180*10)}//文字的对齐方式：top文本基线在文本块的顶部。ctx.textBaseline = 'top';// 对文本进行渲染ctx.fillText(text, offx, getRandom(0, 20))//文本文字进行递增offx += 20//存储验证码，方便验证verify+=text;//出栈恢复为画笔入栈时的状态ctx.restore();}//干扰线//线的起点ctx.moveTo(getRandom(0, 20), getRandom(0, 50));//线的终点ctx.lineTo(getRandom(80, 100), getRandom(0, 50));//对线进行连接ctx.closePath();//进行渲染 默认黑色ctx.stroke();ctx.moveTo(getRandom(0, 100), getRandom(0, 10));ctx.lineTo(getRandom(0, 100), getRandom(40, 50));ctx.closePath();ctx.stroke();//干扰圆//创建一个新的路径ctx.beginPath();ctx.arc(getRandom(25, 75), getRandom(10, 40), getRandom(4, 25), 0, Math.PI * 2);ctx.stroke();// console.log(verify);//验证var ipt = document.getElementsByTagName('input')[0];var btn = document.getElementsByTagName('button')[0];var trun1 =document.getElementsByClassName('trun1')[0];var false1 =document.getElementsByClassName('false1')[0];console.log(trun1);btn.onclick = function(){var value = ipt.value;value =value.toLowerCase();verify = verify.toLowerCase();console.log(verify);// console.log(verify);// console.log(value);if(verify == value){// console.log("32222");trun1.style.display = 'block'false1.style.display = 'none'}else{false1.style.display = 'block'trun1.style.display = 'none'}}//封装一个获取随机的验证码function texts() {var index = Math.floor(Math.random() * (mixin.length - 1));return mixin[index];}//封装一个随机数function getRandom(min, max) {return Math.random() * (max - min) + min;}//封装一个随机颜色function getRandomColor() {return `rgb(${getRandom(0, 255)},${getRandom(0, 255)},${getRandom(0, 255)})`}

三、canvas方法总结

1.线条开始moveTo() 结束 lineTo()

2.矩形 1.rect(x.y,w,h)2.fillRect()3.strokeRect()

3.圆弧arc（x,y,r,起始弧度，结束弧度，方向）方向1逆时针2顺时针默认顺时针

4.文本 strokeText()，fillText() 文本基线：textBaseline

5.阴影效果shadowColor shadowBlur shadowOffsetX shadowOffsetY

6.圆角矩形 arcTo(x1, y1, x2, y2, radius)

7.画笔样式 fillStyle = '颜色' 设置填充填充样式； strokeStyle = '颜色' 描边颜色；lineWidth = '10' 描边线条的宽度；font = '20px 宋体'； stroke() 进行描边渲染；fill() 进行填充渲染；beginPath() 重新开启一个路径；closePath() 闭合当前路径。

8.保存和恢复 save() 保存当前画布的属性的状态，存入栈中；restore() 从栈中出栈，将画布的状态进行恢复；

9.绘制图片 drawImage(img,x,y,w,h)

10.清画布 clearRect(x, y, width, height);、

最后，欢迎大家指正补充

canvas生成随机（颜色位置）验证码相关推荐

c 语言随机验证码原理,用C生成随机中文汉字验证码的基本原理及代码.doc
用C生成随机中文汉字验证码的基本原理及代码用C#生成随机中文汉字验证码的基本原理 1.汉字编码原理到底怎么办到随机生成汉字的呢?汉字从哪里来的呢?是不是有个后台数据表,其中存放了所需要的所有汉字, ...
.NET C#生成随机颜色,可以控制亮度,生成暗色或者亮色基于YUV模式判断颜色明亮度...
.NET C#生成随机颜色,可以控制亮度,生成暗色或者亮色基于YUV模式判断颜色明亮度随机颜色在日常开发中很常用到,有时候要控制颜色明亮度,比如在白色背景网页上的随机颜色,一般要求颜色稍微暗一些, ...
用Python生成随机的中文验证码图片
大家都在 Python论坛里讨论.交流,你还在等什么!赶快加入! 在登录很多网站的时候,他们已经不在使用简单的英文和数字的验证码,为了防止恶心注册和群发软件的侵袭,现在都开始使用中文的验证码了. 今天 ...
用C#生成随机中文汉字验证码的基本原理
前几天去申请免费QQ号码,突然发现申请表单中的验证码内容换成了中文,这叫真叫我大跌眼镜感到好笑,Moper上的猫儿们都大骂腾讯采用中文验证码.^_^ 我不得不佩服腾讯为了防止目前网络上横行的QQ号码自 ...
用C#生成随机中文汉字验证码
1.汉字编码原理到底怎么办到随机生成汉字的呢?汉字从哪里来的呢?是不是有个后台数据表,其中存放了所需要的所有汉字,使用程序随机取出几个汉字组合就行了呢?使用后台数据库先将所有汉字存起来使用时随机取出 ...
Python matplotlib 绘图自动生成随机颜色
有一个项目需要用到绘图,但是由于变量数量不确定,也就不知道该画几条直线,就写了一个循环,每存在一个值,就绘制一条直线,颜色从颜色库里随机. 以下贴出关键代码: import matplotlib.co ...
python 基于pillow模块生成随机图片验证码教程
效果图我们先来看一下大致的效果图. 以上图形都是用非常基础的元素随机构成的:点,线,曲线,文本.而pillow模块远远不止这些功能,如果学好了它,真的就是你想怎么花就怎么花. 那么现在我们就去学习一 ...
java 验证码算术_java生成图形验证码（算数运算图形验证码 + 随机字符图形验证码）...
平凡也就两个字: 懒和惰; 成功也就两个字: 苦和勤; 优秀也就两个字: 你和我. 跟着我从0学习JAVA.spring全家桶和linux运维等知识,带你从懵懂少年走向人生巅峰,迎娶白富美! 关注微信 ...
Android生成简单的图片验证码
暑假的班级项目登录界面用到了验证码,就想着简单点弄个图片验证码好了.看了几篇文章还是有点儿懵.然后耐着性子把一篇关于验证码的文章分析了一下.果然还是得有耐心才行啊. ╰(￣ω￣o) 虽然大致是做出来了 ...

canvas生成随机（颜色位置）验证码

canvas生成随机（颜色位置）验证码相关推荐

最新文章

热门文章