一切尽在代码中

js文件

/** * canvas绘制动画浮动验证码* code by lonelydawn 2017-04-10*/var createVeritification = function(){var GLOBAL_CHAR_NUM = 4;var GLOBAL_CHAR_STRING = "";var GLOBAL_COLOR_SET = ["#FFFFFF", "#DDDDDD", "#AAAAAA", "#888888", "#666666", "#444444", "#000000","#FFB7DD", "#FF88C2", "#FF44AA", "#FF0088", "#C10066", "#A20055", "#8C0044","#FFCCCC", "#FF8888", "#FF3333", "#FF0000", "#CC0000", "#AA0000", "#880000","#FFC8B4", "#FFA488", "#FF7744", "#FF5511", "#E63F00", "#C63300", "#A42D00","#FFDDAA", "#FFBB66", "#FFAA33", "#FF8800", "#EE7700", "#CC6600", "#BB5500","#FFEE99", "#FFDD55", "#FFCC22", "#FFBB00", "#DDAA00", "#AA7700", "#886600","#FFFFBB", "#FFFF77", "#FFFF33", "#FFFF00", "#EEEE00", "#BBBB00", "#888800","#EEFFBB", "#DDFF77", "#CCFF33", "#BBFF00", "#99DD00", "#88AA00", "#668800","#CCFF99", "#BBFF66", "#99FF33", "#77FF00", "#66DD00", "#55AA00", "#227700","#99FF99", "#66FF66", "#33FF33", "#00FF00", "#00DD00", "#00AA00", "#008800","#BBFFEE", "#77FFCC", "#33FFAA", "#00FF99", "#00DD77", "#00AA55", "#008844","#AAFFEE", "#77FFEE", "#33FFDD", "#00FFCC", "#00DDAA", "#00AA88", "#008866","#99FFFF", "#66FFFF", "#33FFFF", "#00FFFF", "#00DDDD", "#00AAAA", "#008888","#CCEEFF", "#77DDFF", "#33CCFF", "#00BBFF", "#009FCC", "#0088A8", "#007799","#CCDDFF", "#99BBFF", "#5599FF", "#0066FF", "#0044BB", "#003C9D", "#003377","#CCCCFF", "#9999FF", "#5555FF", "#0000FF", "#0000CC", "#0000AA", "#000088","#CCBBFF", "#9F88FF", "#7744FF", "#5500FF", "#4400CC", "#2200AA", "#220088","#D1BBFF", "#B088FF", "#9955FF", "#7700FF", "#5500DD", "#4400B3", "#3A0088","#E8CCFF", "#D28EFF", "#B94FFF", "#9900FF", "#7700BB", "#66009D", "#550088","#F0BBFF", "#E38EFF", "#E93EFF", "#CC00FF", "#A500CC", "#7A0099", "#660077","#FFB3FF", "#FF77FF", "#FF3EFF", "#FF00FF", "#CC00CC", "#990099", "#770077"];var chars = [];var ctx = undefined;var timer = undefined;var canvasWidth = 1000;var canvasHeight = 500;// 获取canvas 上下文环境var getContext = function(){var canvas = document.getElementById("canvas");ctx =canvas.getContext("2d");canvasWidth = canvas.width;canvasHeight = canvas.height;return ctx;};// 获取单个字符, 字符范围 0-9 A-Z a-z var getChar = function(){var char = '';// 返回 0- 61之间的整数var seed = Math.floor(Math.random()*62);if(seed < 10)           // seed 在 0- 9之间,字符为数字char = Math.floor(Math.random()*10);else if(seed < 36)    // seed 在10-35之间,字符为大写字母char = String.fromCharCode(Math.floor(Math.random()*25.99)+65);else if(seed < 62)  // seed 在36-62之间,字符为小写字母char = String.fromCharCode(Math.floor(Math.random()*25.99)+97);return char;};// 将单个字符封装为对象var getPackageChars = function(){for(var i=0; i<GLOBAL_CHAR_NUM; i++){chars[i] = {"x": canvasWidth/GLOBAL_CHAR_NUM*i,"y": canvasHeight/10*7,"size": Math.floor(((canvasWidth/GLOBAL_CHAR_NUM > canvasHeight)?canvasHeight:canvasWidth)*8/10),"char": getChar(),"color": GLOBAL_COLOR_SET[Math.floor(Math.random()*(GLOBAL_COLOR_SET.length-0.01))]};// 字符位置移动控制 barchars[i].posCtrl = (i%2 == 0)? -1: 1;}return chars;};// 检测验证码是否正确var veritificate = function(code){var txt = "";for(var i=0;i<GLOBAL_CHAR_NUM;i++)txt += chars[i].char;return txt.toUpperCase() == code.toUpperCase();};// 绘制字符var draw = function(){// 清空 画布ctx.clearRect(0,0,canvasWidth,canvasHeight);// 绘制 浅灰色背景ctx.fillStyle = "#eee";ctx.fillRect(0, 0, canvasWidth, canvasHeight );// 绘制 字符// ctx.font="72px Microsoft YaHei";ctx.font="84px Georgia";for(var i=0;i<GLOBAL_CHAR_NUM;i++){ctx.strokeStyle = chars[i].color;ctx.strokeText(chars[i].char,chars[i].x,chars[i].y);}};// 字体动画效果var animation = function(){// 初始化 timerclearInterval(timer);timer = setInterval(function(){// 动态改变字符位置for(var i=0;i<GLOBAL_CHAR_NUM;i++){chars[i].y += chars[i].posCtrl;if(chars[i].y < canvasHeight * 5/10 || chars[i].y > canvasHeight * 9/10)chars[i].posCtrl = -chars[i].posCtrl;}// 重绘字符draw();},50);};// 创建静态字体 canvasvar createStatic = function(){console.log(getContext());console.log(getPackageChars());draw();};// 创建动画字体 canvasvar createAnimation = function(){getContext();getPackageChars();animation();};return{"createStatic": createStatic,"createAnimation": createAnimation,"veritificate": veritificate}
};var test = new createVeritification();
test.createAnimation();
// test.createStatic();// 点击刷新验证码
var toggleVeritification = function(){test.createAnimation();
};// 验证输入是否正确
var checkCode = function(){// do sth...if(test.veritificate(document.getElementById("txt").value))alert(true);else alert(false);
};

html代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>验证码</title><style type="text/css">span{color:#555;}span:hover{color:#777;}</style>
</head>
<body><div><canvas id="canvas" style="width:100px;height:26px;">你的浏览器不支持canvas,请更换浏览器!</canvas><span onclick="toggleVeritification();">点击刷新</span></div><div><input id="txt" type="text"/></div><div><button onclick="checkCode();">验证</button></div><script type="text/javascript" src="index.js"></script>
</body>
</html>

本例可自动适配各种尺寸canvas

运行结果: