canvas制作随机验证码
2018-05-21 本文已影响0人
CodeBub
在通常的登录界面我们都可以看到验证码，验证码的作用是检测是不是人在操作，防止机器等非人操作，防止数据库被轻而易举的攻破。
验证码一般用PHP和java等后端语言编写；
但是在前端，用canvas也可以绘制验证码；
这样既能实现效果又可以减少服务器请求，用户体验也更加流畅；效果图如下：
图片1.png
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}
canvas {
background: #ddd;
}
</style>
</head>
<body>
<h3>验证码图片</h3>
<canvas id="c9"></canvas>
<script>
var cw = 120; //画布的总宽度
var ch = 30; //画布的总高度
c9.width = cw;
c9.height = ch;
var ctx = c9.getContext('2d');
/**1.绘制背景颜色——填充矩形**/
ctx.fillStyle = rc(150, 230);
ctx.fillRect(0, 0, cw, ch);
/**2.循环绘制4个随机字符**/
ctx.textBaseline = 'top';
var pool = 'ABCDEFGHJKLMNPQRSTUVWXY3456789';
for (var i = 0; i < 4; i++) {
var c = pool[rn(0, pool.length)];//一个随机字符
var fs = rn(18, 40); //字体大小
ctx.font = fs + 'px SimHei';
var fc = rc(50, 150); //字体颜色
ctx.strokeStyle = fc;
var deg = rn(-45, 45);//旋转角度
var x = -fs / 2; //每个字符左上角的坐标
var y = -fs / 2;
//绘制一个字符: 保存状态->平移->旋转->绘制->恢复状态
ctx.save();
ctx.translate(30*i+15, 15);
ctx.rotate(deg*Math.PI/180);
ctx.strokeText(c, x, y);
ctx.restore();
}
/**3.绘制5条干扰线——直线路径**/
for(var i=0; i<5; i++){
ctx.beginPath();
ctx.moveTo(rn(0,cw), rn(0, ch));
ctx.lineTo(rn(0,cw), rn(0, ch));
ctx.strokeStyle = rc(0, 255);
ctx.stroke();
}
/**4.绘制50个杂色点——半径为0.5圆形路径**/
for(var i=0; i<50; i++){
ctx.beginPath();
ctx.arc(rn(0,cw), rn(0, ch),0.5, 0, 2*Math.PI);
ctx.fillStyle = rc(0, 255);
ctx.fill();
}
//random number，返回指定范围内的随机整数
function rn(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
//random color，返回指定范围内的随机颜色
function rc(min, max) {
var r = rn(min, max);
var g = rn(min, max);
var b = rn(min, max);
return `rgb(${r}, ${g}, ${b})`;
}
var obj = {
name:''
}
Object.defineProperty(obj,"name",{
get:function(){
console.log("get")
},
set:function(){
console.log("set")
}
})
</script>
</body>
</html>
