介绍 <李> //文字的构造函数
function 文本(o) {
this.x=0,//x坐标
this.y=0,//y坐标
this.text=& # 39; & # 39;//内容
this.font=零;//字体
this.textAlign=零;//对齐方式
this.init (o);
}
Text.prototype.init=function (o) {
(var key o拷贝){
(例子)=o(例子);
}
}
Text.prototype.render=function(上下文){
this.ctx=上下文;
innerRender(这个);
function innerRender (obj) {
var ctx=obj.ctx;
ctx.save ()
ctx.beginPath ();
ctx.translate (obj.x obj.y);
如果(obj.font) {
ctx.font=obj.font;
}
如果(obj.textAlign) {
ctx.textAlign=obj.textAlign;
}
如果(obj.fill){//是否填充
obj.fillStyle ? (ctx.fillStyle=obj.fillStyle):空;
ctx.fillText (obj.text, 0, 0);
}
,ctx.restore ();
}
,return ;
} ,//直线的构造
o function 线(ctx) {
this.x=0,//x坐标
this.y=0,//y坐标
this.startX=0,//开始点x位置
this.startY=0,,//开始点y位置
this.endX=0,//结束点x位置
this.endY=0;//结束点y位置
this.thin=false;//设置变细系数
this.ctx=ctx;
this.init (o);
}
Line.prototype.init=function (o) {
(var key o拷贝){
(例子)=o(例子);
}
}
Line.prototype.render=function () {
innerRender(这个);
function innerRender (obj) {
var ctx=obj.ctx;
ctx.save ()
ctx.beginPath ();
ctx.translate (obj.x obj.y);
如果(obj.thin) {
ctx.translate (0.5, 0.5);
}
如果(obj.lineWidth){//设定线宽
ctx.lineWidth=obj.lineWidth;
}
如果(obj.strokeStyle) {
ctx.strokeStyle=obj.strokeStyle;
}//划线
,ctx.moveTo (obj.startX, obj.startY);
,ctx.lineTo (obj.endX, obj.endY);
,ctx.stroke ();
,ctx.restore ();
}
,
,return ;
}
小编给大家分享一下JavaScript怎么实现页面动态验证码,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
效果图:
,实现思路:
把数字和字母放到一个数组中,通过随机的方式取得数组下标,总共取4个组成验证码;
<李>把验证码渲染出来(一个一个的渲染);
<李>绘制一定数量的干扰线,随机颜色;
<李>输入验证码,输入4位以后去验证,正确显示钩,错误显示叉并且刷新验证码。
编写构造函数
文本构造函数
线段构造函数
按长度获取验证码
//根据指定长度生成随机字母数字
Verifiable.prototype.randomWord=函数(范围){
,var str =,““, pos机,
,才能arr =,(& # 39; 0 & # 39;,, & # 39; 1 & # 39;,, & # 39; 2 & # 39;,, & # 39; 3 & # 39;,, & # 39; 4 & # 39;,, & # 39; 5 & # 39;,, & # 39; 6 & # 39;,, & # 39; 7 & # 39;,, & # 39; 8 & # 39;,, & # 39; 9 & # 39;,, & # 39;一个# 39;,,& # 39;b # 39;,, & # 39; c # 39;,, & # 39; d # 39;,, & # 39; e # 39;,, & # 39; f # 39;,, & # 39;舌鳎# 39;,,& # 39;h # 39;,, & # 39;我# 39;,,& # 39;强生# 39;,,& # 39;k # 39;,, & # 39; l # 39;,, & # 39;猴# 39;,,& # 39;n # 39;,, & # 39; o # 39;,, & # 39; p # 39;,, & # 39;提问# 39;,,& # 39;" # 39;,,& # 39;& # 39;,,& # 39;t # 39;,, & # 39; u # 39;,, & # 39; v # 39;,, & # 39; w # 39;,, & # 39; x # 39;,, & # 39; y # 39;,, & # 39; z # 39;,, & # 39;一个# 39;,,& # 39;b # 39;,, & # 39; c # 39;,, & # 39; d # 39;,, & # 39; e # 39;,, & # 39; f # 39;,, & # 39;舌鳎# 39;,,& # 39;h # 39;,, & # 39;我# 39;,,& # 39;强生# 39;,,& # 39;k # 39;,, & # 39; l # 39;,, & # 39;猴# 39;,,& # 39;n # 39;,, & # 39; o # 39;,, & # 39; p # 39;,, & # 39;提问# 39;,,& # 39;" # 39;,,& # 39;& # 39;,,& # 39;t # 39;,, & # 39; u # 39;,, & # 39; v # 39;,, & # 39; w # 39;,, & # 39; x # 39;,, & # 39; y # 39;,, & # 39; z # 39;];
,(var i=0;, i<范围;,我+ +){
时间=pos 才能;Math.round (math . random (), *, (arr.length-1));
str 才能+=,arr (pos);
,}
,return str;
} 绘制文字
//绘制文字
Verifiable.prototype.drawText=function () {
var 这=;
var count =, 4;//文字个数
var textW =, 40;//文字所占宽
var 代码=this.code =, this.randomWord(数);
var codeArr =, code.split (“;”);
var 文本,x ;
codeArr.forEach(函数(c i) {
时间=x that.w/计数*我+ textW/2;//绘制文字
时间=text new 文本({
x: x,
y: textW-10,
文字:c,
字体:& # 39;30 px ans-serif& # 39;
textAlign: & # 39;中心# 39;
填充:没错,
fillStyle: & # 39; # 412 d6a& # 39;
});
that.renderArr.push(文本);
})
}JavaScript怎么实现页面动态验证码
