canvas基础之图形验证码的示例
程序员文章站
2023-12-01 14:36:46
这篇文章主要介绍了canvas基础之图形验证码的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧... 18-01-02...
在通常的登录界面我们都可以看到验证码，验证码的作用是检测是不是人在操作，防止机器等非人操作，防止数据库被轻而易举的攻破。
验证码一般用php和java等后端语言编写；
但是在前端，用canva或者svg也可以绘制验证码；
直接上干货：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="100" height="40">
您的浏览器不支持canvas
</canvas>
</body>
<script type="text/javascript">
var mycanvas = document.getelementbyid("mycanvas");
var context = mycanvas.getcontext("2d");
//随机字符（透明度）（大小随机，位置随机）；
var strstore = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789";
//随机函数
function roundnum(min, max) {
return parseint(math.random() * (max - min) + min);
}
//文字内容部分：
var str = "";
for(var i = 0; i < 5; i++) {
context.beginpath();
//随机颜色（浅色：rgb - 200~250）
var color = `rgb(${roundnum(0,255)},${roundnum(0,255)},${roundnum(0,255)})`;
context.fillstyle = color;
context.font = roundnum(20,30)+"px arial";
context.textalign = "center";
str = strstore[roundnum(0,strstore.length)];
context.filltext(str, 10 + 18 * i, roundnum(20,35));
}
//10个左右的随机（长度随机，位置随机），干扰线
for(var j = 0; j < roundnum(5, 10); j++) {
context.beginpath();
var color = `rgb(${roundnum(0,255)},${roundnum(0,255)},${roundnum(0,255)})`;
context.strokestyle = color;
context.moveto(roundnum(0, 100), roundnum(0, 40));
context.lineto(roundnum(0, 100), roundnum(0, 40));
context.stroke();
}
//干扰项：10个左右的随机（半径随机，位置随机），干扰圆
for(var j = 0; j < roundnum(5, 10); j++) {
context.beginpath();
context.fillstyle = color;
context.arc(roundnum(0, 100), roundnum(0, 40), roundnum(0, 5), math.pi * 2 / (roundnum(1, 360)), math.pi * 2 / (roundnum(1, 360)));
context.fill();
}
</script>
</html>
结果如图：
至于要拿来咋用，就看大家高兴了。想怎么整这么整。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇： C#获取所有进程的方法