js+canvas绘制图形验证码
本文实例为大家分享了利用canvas绘制图形验证码的具体代码，供大家参考，具体内容如下
思路：通过随机获取指定字符串的指定数的字符，通过canvas绘制出来
返回指定范围的随机整数
//指定范围的随机函数：返回指定范围内的随机整数
function rand(min, max) {
/*
max=10
min=1
Math.random()=0 最小取到1
Math.random()=0.9999*10=Math.floor(9.9)=>+1=10
*/
return Math.floor(Math.random() * (max - min + 1)) + min;
}
返回指定数量的随机字符串
function randStr(count) {
var str = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var code = '';
for (var i = 0; i < count; i++) {
var index = rand(0, str.length - 1)//必须减一否则会出现下标越界
code += str.charAt(index) + ' ';
}
return code
}
绘制图形
function verify(selector) {
//获取canvas的dom对象
var cas = document.querySelector(selector);
//获取上下文对象
var ctx = cas.getContext('2d');
//指定接收的字符串
var code = randStr(5);
//绘制矩形，作背景色
ctx.fillStyle = 'orange';
//绘制实心矩形
ctx.fillRect(0, 0, 160, 50)
//文字居中
// ctx.textAlign = 'left'
//字体样式的属性要遵循css中的书写顺序
ctx.font = '900 24px 宋体'
//设置字体颜色
ctx.fillStyle = '#FFF';
//绘制文字
ctx.fillText(code, 20, 30);
}
鼠标点击更新验证码
document.querySelector('canvas').addEventListener('click', function () {
verify('canvas')
})
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绘制图形验证码</title>
<style>
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas width="160" height="50"></canvas>
</body>
<script>
verify('canvas')
document.querySelector('canvas').addEventListener('click', function () {
verify('canvas')
})
function verify(selector) {
//获取canvas的dom对象
var cas = document.querySelector(selector);
//获取上下文对象
var ctx = cas.getContext('2d');
//指定接收的字符串
var code = randStr(5);
//绘制矩形，作背景色
ctx.fillStyle = 'orange';
//绘制实心矩形
ctx.fillRect(0, 0, 160, 50)
//字体样式的属性要遵循css中的书写顺序
ctx.font = '900 24px 宋体'
//设置字体颜色
ctx.fillStyle = '#FFF';
//绘制文字
ctx.fillText(code, 20, 30);
}
//指定范围的随机函数：返回指定范围内的随机整数
function rand(min, max) {
/*
max=10
min=1
Math.random()=0 最小取到1
Math.random()=0.9999*10=Math.floor(9.9)=>+1=10
*/
return Math.floor(Math.random() * (max - min + 1)) + min;
}
//返回随机字符串
function randStr(count) {
var str = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var code = '';
for (var i = 0; i < count; i++) {
var index = rand(0, str.length - 1)//必须减一否则会出现下标越界
code += str.charAt(index) + ' ';
}
return code
}
// console.log(randStr(6))
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript Canvas实现验证码
在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写. 但是在前端,用canva或者SVG也可以绘制验证码. 绘制验证码不能是简单的随机字符串,而应该在绘制界面有一些干扰项: 如:干扰线段.干扰圆点.背景等等. 这里的这个demo的canvas验证码干扰项比较简单. 可以在图示中看到本例中的干扰项. canvas验证码展示效果: 点击实现改变(重绘)验证码: 在控制台运行函数输出返回值
-
js+canvas实现滑动拼图验证码功能
上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的.我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图.下面介绍具体步骤. 首先随便找一张图片渲染到canvas上,这里#canvas作为画布,#block作为裁剪出来的小滑块. <canvas width="310" height="155" id="canvas"></canvas> <canvas width=&q
-
JS+HTML5 canvas绘制验证码示例
本文实例讲述了JS+HTML5 canvas绘制验证码.分享给大家供大家参考,具体如下: css样式: <style> body{ text-align: center; } canvas{ background:#ddd; } </style> HTML部分: body中添加标签canvas: <canvas id="c3"></canvas> js部分: //创建两个变量保存验证码的宽度和高度 var w = 120; var h =
-
JavaScript使用canvas绘制随机验证码
本文实例为大家分享了使用canvas绘制随机验证码的具体代码,供大家参考,具体内容如下 理论基础: 掌握使用canvas绘制线条和圆形以及绘制文字 实现思路: 先构建一个画布,设置一定的宽高(在canvas中设置宽高和在style中设置是有区别的,建议直接在canvas标签中设置),封装一个生成随机数的方法,为线条和圆形的绘制设置随机的位置,既然是随机的,必然是有随机的区间,先获取画布的宽高,线条和圆的位置就是(0~画布的宽高区间)的随机位置,再定义一个随机字符,获取随机的索引值,即可生成随机的
-
js+canvas实现验证码功能
刚刚开始接触canvas,写个验证码小功能练练手,实现效果图如下: 主要代码如下: html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
-
使用canvas及js简单生成验证码方法
在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点.验证码生成步骤是: 1.生成一张画布canvas 2.生成随机数验证码 3.在画布中生成干扰线 4.把验证码文本填充到画布中 5.点击画布更换验证码 结构与样式: <canvas id="mycanvas" width='90' height='40'> 您的浏览器不支持canvas,请换个浏览器试试~ </canvas> <style> #mycanvas{ curso
-
js+canvas绘制图形验证码
本文实例为大家分享了利用canvas绘制图形验证码的具体代码,供大家参考,具体内容如下 思路:通过随机获取指定字符串的指定数的字符,通过canvas绘制出来 返回指定范围的随机整数 //指定范围的随机函数:返回指定范围内的随机整数 function rand(min, max) { /* max=10 min=1 Math.random()=0 最小取到1 Math.random()=0.9999*10=Math.floor(9.9)=>+1=10 */ return Math.floor(Ma
-
JS+canvas绘制的动态机械表动画效果
本文实例讲述了JS+canvas绘制的动态机械表动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas时钟</title> <style> canvas { border: 1px
-
jquery canvas绘制图片验证码实例
本文实例为大家分享了jquery canvas绘制图片验证码的具体代码,供大家参考,具体内容如下 CSS .identify-code{ position: absolute; right: 6px; top: 50%; width: 118px; height: 40px; margin: -21px 0 0 0; } HTML <span id="code" class="identify-code"> <canvas class="
-
js+canvas绘制矩形的方法
本文实例讲述了js+canvas绘制矩形的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm
-
js+canvas绘制五角星的方法
本文实例讲述了js+canvas绘制五角星的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht
-
JS canvas绘制五子棋的棋盘
本文为大家分享了JS canvas绘制五子棋棋盘的具体代码,供大家参考,具体内容如下 box-shadow:给元素块周边添加阴影效果. 语法:box-shadow: h-shadow v-shadow blur spread color inset: h-shadow: (必须)阴影的水平偏移量,如果是正值,则阴影在元素块右边:如果是负值,则阴影在元素块左边. v-shadow: (必须)阴影的垂直偏移量,如果是正值,则阴影在元素块底部:如果是负值,则阴影在元素块顶部. blur: (可选)阴影
-
JS+Canvas绘制抽奖转盘
本文实例为大家分享了JS+Canvas绘制抽奖转盘的具体代码,供大家参考,具体内容如下 给大家分享一个Canvas绘制的转盘抽奖,点击开关开始转动时,转盘开始转动,转盘停止时指针指向的区域即为抽中的奖品,并显示在转盘中间,效果图如下: 动画实的代码如下: <!DOCTYPE html> <html> <head> <style> canvas { background: #eee; } </style> <title>Canvas绘制
-
JS+Canvas绘制动态时钟效果
本文实例为大家分享了Canvas绘制动态时钟效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #mycanvas{ position: absolute; left:50%; margin-left:-250px; border:5px solid #
-
JavaScript实现使用Canvas绘制图形的基本教程
由于这两年HTML5火的正热,所以研究了一下,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用. 1.使用Canvas绘制直线: <!doctype html> <html> <head> <meta charset="UTF-8"> </head> <style ty