1. html模板:
1 <div class="c-code"> 2 <canvas id="c-cvs"></canvas> 3 </div>
2. 使用:
2.1 引用js文件
2.2 在模板之外添加一个盒子,宽高必须给,验证码宽高与之相等
2.3 每调用一次drawBg(),刷新一次
2.4 drawBg().textArr 得到当前的文本内容存为数组
2.5 drawBg().text 得到当前的文本内容存为字符串
3. js代码:
(function (w){
var oCode=document.getElementsByClassName("c-code")[0];
var cvs=document.getElementById("c-cvs");
var ctx=cvs.getContext("2d");
//设置整个内容宽高与父盒子相等
oCode.style.width="100%";
oCode.style.height="100%";
function drawBg(){
//获取盒子宽高
this.width=oCode.offsetWidth;
this.height=oCode.offsetHeight;
//随机点坐标
this.randomX=0;
this.randomY=0;
//存放验证码内容(数组)
this.textArr=[];
//存放验证码内容(字符串)
this.text="";
this._init();
this.draw();
this.addPoint();
this.addText();
}
drawBg.prototype={
constructor: drawBg,
//设置画布宽高
_init: function (){
cvs.width=this.width;
cvs.height=this.height;
},
//获取随机的颜色
randomColor: function (){
var colorStr="0123456789abcdef";
var colorArr=colorStr.split("");
this.color="#";
//0-15随机数
var randomNum;
for (var i = 0; i < 6; i++) {
randomNum=Math.floor(Math.random()*16)
this.color+=colorArr[randomNum]
}
return this.color;
},
//绘制背景
draw: function (){
//每次创建先清除画布
ctx.clearRect(0,0,this.width,this.height);
ctx.fillStyle=this.randomColor();
ctx.fillRect(0,0,this.width,this.height);
},
//绘制随机点
randomPoint: function (){
this.randomX=Math.random()*this.width;
this.randomY=Math.random()*this.height;
ctx.fillStyle=this.randomColor();
ctx.fillRect(this.randomX,this.randomY,2,2);
ctx.fill();
},
//添加多个随机点
addPoint: function (){
//生成的点的个数等于(宽*高/10)
var num=Math.floor(this.width*this.height/10);
for (var i = 0; i < num; i++) {
this.randomPoint();
}
},
//添加文本
addText: function (){
// 0-61随机数
var randomNum;
//textData: (0-9 a-z A-Z)
var textData=[];
for(var i=48;i<58;i++){
textData.push(String.fromCharCode(i));
}
for(var i=65;i<91;i++){
textData.push(String.fromCharCode(i));
}
for(var i=97;i<123;i++){
textData.push(String.fromCharCode(i));
}
this.text="";
this.textArr=[];
for(var i=0;i<4;i++){
randomNum=Math.floor(Math.random()*62);
this.text+=textData[randomNum];
this.textArr.push(textData[randomNum]);
}
//绘制文本
ctx.font="bold 25px Arial";
ctx.textAlign="center";
ctx.textBaseline="middle";
ctx.fillStyle=this.randomColor;
ctx.fillText(this.text,this.width/2,this.height/2);
}
}
w.drawBg=function (){
return new drawBg();
}
})(window)
4. 链接地址( http://hsianglee.top/component/randomCode.html )