canvas绘制验证码
css样式:
<style>
body{
text-align: center;
}
canvas{
background:#ddd;
}
</style>
body中添加标签canvas:
<canvas id="c3"></canvas>
js:
//创建两个变量保存验证码的宽度和高度
var w = 120;
var h = 30;
//将变量值赋值给canvas
c3.width = w;
c3.height = h;
//获取画笔
var ctx = c3.getContext("2d");
//创建两个函数,返回指定范围内的随机数,随机颜色
//随机数
function rn(min,max){
var n = Math.random()*(max-min)+min;
return Math.floor(n);
}
//随机颜色
function rc(min,max){
var r = rn(min,max);
var g = rn(min,max);
var b = rn(min,max);
return `rgb(${r},${g},${b})`;
}
//填充的背景
ctx.fillStyle=rc(180,230);
ctx.fillRect(0,0,w,h);
//创建一个随机的文字[字母和数字]4个
var pool = "ABCDEFGHIJKabced胡歌0123456789哈哼哈哈";
var str ="";
for(var i = 0;i<4;i++){
var index = Math.floor(Math.random()*pool.length);
str +=pool[index];
}
//console.log(str);
ctx.font = "30px SimHei";
ctx.fillStyle = rc(80,180);//文字颜色
ctx.textBaseline="top";
ctx.fillText(str,20,0);//在(20,0)处开始填充文字
//绘制6条干扰线
for(var i = 0;i<6;i++){
ctx.strokeStyle = rc(0,255);
ctx.beginPath();
ctx.moveTo(rn(0,w),rn(0,h));
ctx.lineTo(rn(0,w),rn(0,h));
ctx.stroke();
}
//绘制50个干扰点
for(var i = 0;i<50;i++){
ctx.fillStyle = rc(0,255);
ctx.beginPath();
ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI);
ctx.fill();
}
canvas绘制验证码的更多相关文章
- 用canvas绘制验证码
在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写: 但是在前端,用canva或者SV ...
- canvas 绘制验证码
注意: 真正项目中验证码图片都是由服务器端(PHP.JSP.Node.js)技术来生成. 最终效果: 代码: <!DOCTYPE html> <html> <head l ...
- canvas实现验证码
在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写. 但是在前端,用canva或者SV ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 通过GDI+绘制 验证码
只为了记录下自己的学习历程,方便日后查看 现在开始言归正传,以下为其完整代码附上 using System; using System.Collections.Generic; using Syste ...
- 学习笔记:HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...
随机推荐
- 关于Python程序的运行方面,有什么手段能提升性能?
1.使用多进程,充分利用机器的多核性能 2.对于性能影响较大的部分代码,可以使用C或C++编写 3.对于IO阻塞造成的性能影响,可以使用IO多路复用来解决 4.尽量使用Python的内建函数 5.尽量 ...
- MVC框架与MTC框架
3.WEB框架 MVC Model View Controller 数据库 模板文件 业务处理 MTV Model Template View 数据库 模板文件 业务处理 ############## ...
- mysql语句之DDL
SQL分类: DDL(Data Definition Languages)语句:数据定义语言,这些语句定义了不同的数据段.数据库.表.列.索引等数据库对象的定义.常用的语句关键字主要包括create. ...
- 编辑器和IDE的区别以及WebStorm和PhpStorm的区别
编辑器和IDE的区别: 编辑器就是纯粹编辑文本的编辑器,识别级别在文字级,只显示你想写入和打开的文本内容,不管你写什么内容,只提供接收与显示功能,Windows自带的写字板就是最简单的编辑器.举个生活 ...
- srs-librtmp pusher(push h264 raw)
Simple Live System Using SRS https://www.cnblogs.com/dong1/p/5100792.html 1.上面是推送文件,改成推送缓存 封装了三个函数 i ...
- kali优化配置(1)
前言 无论是工具还是物理机.虚拟机,我都遇到过惨绝人寰的配置错误.为了有效避免这些烦恼困住我,写一个排错文档之外,我还应当谨慎小心,从每一次配置走起..我的kali昨日的MySQL无法登陆,也没办法联 ...
- Linux性能优化从入门到实战:10 内存篇:如何利用Buffer和Cache优化程序的运行效率?
缓存命中率 缓存命中率,是指直接通过缓存获取数据的请求次数,占所有数据请求次数的百分比,可以衡量缓存使用的好坏.命中率越高,表示使用缓存带来的收益越高,应用程序的性能也就越好. 实际上,缓存是 ...
- 2018-10-25-weekly
Algorithm 94. 二叉树的中序遍历 What 给定一个二叉树,返回它的中序遍历. How 二叉树的中序遍历顺序为左-根-右,可以用递归来解,对左子结点调用递归函数,根节点访问值,右子节点再调 ...
- java 小数精确计算
小数精确计算 System.out.println(2.00 -1.10);//0.8999999999999999 上面的计算出的结果不是 0.9,而是一连串的小数.问题在于1.1这个数字不能被精确 ...
- tensorflow函数介绍(3)
tf.nn.softmax_cross_entropy_with_logits(logits,labels) #其中logits为神经网络最后一层输出,labels为实际的标签,该函数返回经过soft ...