canvas 繪制驗證碼
之前用canvas繪制了八卦圖, 今天用canvas繪制的驗證碼, 很多地方都會用到, 記錄下來 ,以後可以直接用
用到的方法
矩形
canvas.getContext(‘2d‘); //構建繪圖環境
canvas.clearRect(x,y,w,h); //清空之前繪制的矩形,釋放空間
canvas.fillStyle=‘顏色‘; //填充顏色
canvas.fillStyle=‘rgb(r,g,b)‘; //填充顏色
canvas.fillRect(x,y,w,h); //繪制矩形
文字
canvas.font=‘12px 微軟雅黑‘; //字體大小,字體
canvas.fillText(‘文字‘,x,y); //在畫布上寫字(文字內容,x坐標,y坐標);
線條,路徑(幹擾線)
canvas.beginPath(); //繪制線條,路徑開始,子路經的集合
canvas.moveTo(x,y); //起始點
canvas.lineTo(x,y); //終止點
canvas.strokeStyle=‘顏色‘; //路徑的顏色
canvas.stroke(); //鏈接起始點和終止點
點,圓圈(幹擾點)
canvas.arc(x,y,z,0,2*Math.PI); //完整圓(x,y,半徑,起始角,結束角);起始角和結束角決定了該圓是否完整,取值範圍[0,2]
其他
Math.random(); //[0,1)之間的隨機數
Math.floor(); //向下取整
開始畫驗證碼
1.定義一個畫布,寬高不能寫在style內
<canvas id="canvas" width="120" height="30" style="cursor: pointer;"></canvas>
2.獲取並畫布並構建繪圖環境
var cas=document.querySelector(‘#canvas‘); var ctx=cas.getContext(‘2d‘); //構建繪圖環境
3.繪制一個矩形,要求該矩形的背景色為隨機(每次刷新頁面的背景色都不一樣);
3.1首先生成一個隨機背景的方法,顏色參數(0,255);
function ranbColor(min,max){ var r=Math.floor(Math.random()*(max-min+1)+min); var g=Math.floor(Math.random()*(max-min+1)+min); var b=Math.floor(Math.random()*(max-min+1)+min); return ‘rgb(‘+r+‘,‘+g+‘,‘+b+‘)‘; }
3.2繪制矩形
function draw(){ ctx.fillStyle=ranbColor(170,250); //這裏背景色的取值範圍為[170,250],顏色比較適中 ctx.fillRect(0,0,120,30); //繪制矩形 }
4.四位隨機數
4.1生成一個有範圍的隨機數
function ranbNum(min,max){ var num=Math.floor(Math.random()*(max-min+1)+min); return num; }
4.2生成一個四位數的隨機數
var data=‘qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890‘; for(var i=0;i<120;i+=30){ //循環四次,取四個字 var c=data[ranbNum(0,data.length-1)]; //index為隨機數,[0,data.length-1] 取字(隨機) ctx.fillStyle=ranbColor(60,160); //字體顏色 ctx.font=ranbNum(15,40)+‘px SimHei‘; //字體大小,字體 ctx.fillText(c,i+ranbNum(5,12),ranbNum(15,30)); //字體填充(字內容,x軸,y軸)位置都是隨機 }
5.幹擾線
for (var i=0;i<10;i++) { ctx.beginPath(); //路徑開始,子路經的集合 ctx.moveTo(ranbNum(0,120),ranbNum(0,120));//起始點(x,y),都隨機 ctx.lineTo(ranbNum(0,120),ranbNum(0,120));//終止點(x,y) ctx.strokeStyle=ranbColor(60,160);//路徑的顏色 ctx.stroke(); //將上面的兩個點連接起來 }
6.幹擾點,幹擾圓圈
//繪制幹擾點 for (var i=0;i<10;i++) { ctx.beginPath(); //路徑開始 ctx.arc(ranbNum(0,120),ranbNum(0,30),ranbNum(1,5),0,2*Math.PI);//畫圓(x,y,z,0,2*Math.PI) x坐標,y坐標,半徑,完整圓 ctx.strokeStyle=ranbColor(60,160); ctx.stroke(); }
完整代碼, 通過點擊事件來刷新文字內容和背景顏色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--兼容ie9+-->
<canvas id="canvas" width="120" height="30" style="cursor: pointer;"></canvas>
</body>
</html>
<script>
var cas=document.querySelector(‘#canvas‘);
var ctx=cas.getContext(‘2d‘);
draw();
cas.onclick=function(){
ctx.clearRect(0,0,120,30); //清空之前的矩形,釋放空間
draw();
//隨機4位數
var data=‘qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890‘;
for(var i=0;i<120;i+=30){
var c=data[ranbNum(0,data.length-1)]; //index為隨機數,[0,data.length-1] 取字
ctx.fillStyle=ranbColor(60,160); //字體顏色
ctx.font=ranbNum(15,40)+‘px SimHei‘; //字體大小,字體
ctx.fillText(c,i+ranbNum(5,12),ranbNum(15,30)); //字體填充(字內容,x軸,y軸)
}
//繪制幹擾線
for (var i=0;i<10;i++) {
ctx.beginPath(); //路徑開始,子路經的集合
ctx.moveTo(ranbNum(0,120),ranbNum(0,120));//起始點(x,y),都隨機
ctx.lineTo(ranbNum(0,120),ranbNum(0,120));//終止點(x,y)
ctx.strokeStyle=ranbColor(60,160);//路徑的顏色
ctx.stroke(); //將上面的兩個點連接起來
}
//繪制幹擾點
for (var i=0;i<10;i++) {
ctx.beginPath(); //路徑開始
ctx.arc(ranbNum(0,120),ranbNum(0,30),ranbNum(1,5),0,2*Math.PI);//畫圓(x,y,z,0,2*Math.PI) x坐標,y坐標,半徑,完整圓
ctx.strokeStyle=ranbColor(60,160);
ctx.stroke();
}
}
//隨機數方法
function ranbNum(min,max){
var num=Math.floor(Math.random()*(max-min+1)+min);
return num;
}
//繪制矩形
function draw(){
ctx.fillStyle=ranbColor(170,250); //這裏背景色的取值範圍為[170,250],顏色比較適中
ctx.fillRect(0,0,120,30); //繪制矩形
}
//顏色界於170到250,隨機
function ranbColor(min,max){
var r=Math.floor(Math.random()*(max-min+1)+min);//170+[0,80)
var g=Math.floor(Math.random()*(max-min+1)+min);//170+[0,80)
var b=Math.floor(Math.random()*(max-min+1)+min);//170+[0,80)
return ‘rgb(‘+r+‘,‘+g+‘,‘+b+‘)‘;
}
</script>
效果(這裏只有圖片,沒有點擊的動態效果,需要自己在本地運行看效果)
canvas 繪制驗證碼