在通常的登錄界面我們都可以看到驗(yàn)證碼，驗(yàn)證碼的作用是檢測(cè)是不是人在操作澄耍，防止機(jī)器等非人操作样漆，防止數(shù)據(jù)庫被輕而易舉的攻破。
驗(yàn)證碼一般用PHP和java等后端語言編寫蛹稍；
但是在前端吧黄，用canvas也可以繪制驗(yàn)證碼；
這樣既能實(shí)現(xiàn)效果又可以減少服務(wù)器請(qǐng)求唆姐，用戶體驗(yàn)也更加流暢拗慨；效果圖如下：
圖片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>驗(yàn)證碼圖片</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.循環(huán)繪制4個(gè)隨機(jī)字符**/
ctx.textBaseline = 'top';
var pool = 'ABCDEFGHJKLMNPQRSTUVWXY3456789';
for (var i = 0; i < 4; i++) {
var c = pool[rn(0, pool.length)];//一個(gè)隨機(jī)字符
var fs = rn(18, 40); //字體大小
ctx.font = fs + 'px SimHei';
var fc = rc(50, 150); //字體顏色
ctx.strokeStyle = fc;
var deg = rn(-45, 45);//旋轉(zhuǎn)角度
var x = -fs / 2; //每個(gè)字符左上角的坐標(biāo)
var y = -fs / 2;
//繪制一個(gè)字符: 保存狀態(tài)->平移->旋轉(zhuǎn)->繪制->恢復(fù)狀態(tài)
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個(gè)雜色點(diǎn)——半徑為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，返回指定范圍內(nèi)的隨機(jī)整數(shù)
function rn(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
//random color奉芦，返回指定范圍內(nèi)的隨機(jī)顏色
function rc(min, max) {
var r = rn(min, max);
var g = rn(min, max);
var b = rn(min, max);
return `rgb(${r}, ${g}, $赵抢)`;
}
var obj = {
name:''
}
Object.defineProperty(obj,"name",{
get:function(){
console.log("get")
},
set:function(){
console.log("set")
}
})
</script>
</body>
</html>
